When an image changes as you hover your pointer over it, it is called a "mouseover." Below is an example of how one works, move your pointer over it.
To make your own, place this code between your <head> and </head> tags
_____________________________________________________________
<script language="JavaScript"><!--
img1_on = new Image(28,24);
img1_on.src="image1a.gif";
img1_off = new Image(28,24);
img1_off.src="image1.gif";
img2_on = new Image(28,24);
img2_on.src="image2a.gif";
img2_off = new Image(28,24);
img2_off.src="image2.gif";
img3_on = new Image(28,24);
img3_on.src="image3a.gif";
img3_off = new Image(28,24);
img3_off.src="image3.gif";
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");
}
// --></script>
img1_on = new Image(28,24);
img1_on.src="image1a.gif";
img1_off = new Image(28,24);
img1_off.src="image1.gif";
img2_on = new Image(28,24);
img2_on.src="image2a.gif";
img2_off = new Image(28,24);
img2_off.src="image2.gif";
img3_on = new Image(28,24);
img3_on.src="image3a.gif";
img3_off = new Image(28,24);
img3_off.src="image3.gif";
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");
}
// --></script>
_____________________________________________________________
Images 1, 2 and 3 are the regular images, and 1a, 2a and 3a are the mouseover images. 28 is the image width in pixels, 24 is the image height.
Now, where the images occur, use the following code:
<a href="page.html" onmouseover="over_image('img1');" onmouseout="off_image('img1')"><img src="image1.gif" border="0" name="img1"></a>
You can add as many mouseovers as you like, just call them img4, img5, etc.
Coding Tutorials 
Hosting Tutorials 
Software 
Design Tutorials 
Site Tools 
0 Comments:
Post a Comment