JAVASCRIPT TO CREATE POP UP IMAGES ON HOVER
- Include in <head>
<script language="JavaScript">
<!-- Hide the script from old browsers --
img1_on = new Image();
img1_on.src="images/facebook1.png";
img1_off = new Image();
img1_off.src="images/facebook2.png";
img2_on = new Image();
img2_on.src="images/googleplus1.png";
img2_off = new Image();
img2_off.src="images/googleplus2.png";
img3_on = new Image();
img3_on.src="images/twitter1.png";
img3_off = new Image();
img3_off.src="images/twitter2.png";
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 --
img1_on = new Image();
img1_on.src="images/facebook1.png";
img1_off = new Image();
img1_off.src="images/facebook2.png";
img2_on = new Image();
img2_on.src="images/googleplus1.png";
img2_off = new Image();
img2_off.src="images/googleplus2.png";
img3_on = new Image();
img3_on.src="images/twitter1.png";
img3_off = new Image();
img3_off.src="images/twitter2.png";
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 in <body>/<footer> as per your need :
<a href="www.googleplus.com" onMouseOver="over_image('img2');" onMouseOut="off_image('img2')"> <img src="images/googleplus2.png" border="0" name="img2"> </a>
<a href="www.twitter.com" onMouseOver="over_image('img3');" onMouseOut="off_image('img3')"> <img src="images/twitter2.png" border="0" name="img3"> </a>
Explanation :
For zoom in effect keep every image2 of say dimension 60*60 and image1 of say 72*72 as per your need & for zoom out effect vice versa.
First image2 is displayed which when hovered is replaced by image1 which looks like animation.
No comments:
Post a Comment