Mouse Over and Out Effect on Image using JavaScript


Hello guys, here is the simple step on mouse over and out effect on image. Write below script and check the effects it’s really awesome and simple.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Mouse Over and Out Effecttitle>
    <script language="javascript">
 function ShowPic(Image)
 {
 Image = "images/" + Image;
 document.ShowEnlarge.src = Image;
 }
 function HidePic()
 {
 document.ShowEnlarge.src = '';
 }
 script>
head>
<body>
    <form id="frmMouseOver" runat="server">
    <div>
  <table width="800">
 <tr>
 <td valign="top" width="160">
 <img src="images/1.jpg" onmouseover="ShowPic('2.jpg');" onmouseout="HidePic();" width="50" height="50" />td>
 <td>
 <img src="images/2.jpg" onmouseover="ShowPic('1.jpg');" onmouseout="HidePic();" width="50" height="50" /><br />
 td> tr>
 <tr>
 <td colspan="2"><img name="ShowEnlarge" src="" width="450" height="350">td>
tr>
 table>

    div>
    form>
body>
html>



    Mouse Over and Out Effect
   


   

   

 



















   

   






Comments