JAVASCRIPT TO CHANGE IMAGES ON HOVER
- Include this in <head>
<script language="JavaScript">
<!-- Hide the script from old browsers --
img0_on = new Image();
img0_on.src="images/gateway1.jpg";
img0_off = new Image();
img0_off.src="images/gateway2.jpg";
img1_on = new Image();
img1_on.src="images/juhu1.jpg";
img1_off = new Image();
img1_off.src="images/juhu2.jpg";
function over_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_on.src");
}
function off_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_off.src");
}
// --End Hiding Here -->
</script>
<!-- Hide the script from old browsers --
img0_on = new Image();
img0_on.src="images/gateway1.jpg";
img0_off = new Image();
img0_off.src="images/gateway2.jpg";
img1_on = new Image();
img1_on.src="images/juhu1.jpg";
img1_off = new Image();
img1_off.src="images/juhu2.jpg";
function over_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_on.src");
}
function off_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_off.src");
}
// --End Hiding Here -->
</script>
- Include this in <body>
<a href="#" onMouseOver="over_image('img0');" onMouseOut="off_image('img0')"> <img src="images/gateway2.jpg" border="0" name="img0" width="200" height="200"> </a>
<a href="#" onMouseOver="over_image('img1');" onMouseOut="off_image('img1')"> <img src="images/juhu2.jpg" border="0" name="img1" width="200" height="200"> </a>
Explanation :
gateway2.jpg is the image first displayed which is replaced by gateway1.jpg when mouse is hovered on it. & same for other image.
No comments:
Post a Comment