Menu

Mouseover Tutorial

Most of you have probably seen a mouseover at one time or another. This is a neat little javascript that calls one image, and when you move your mouse over it, calls another image. Some of you may have noticed this one I’ve had on the front page at one time or another…

If you use Macromedia’s Dreamweaver to create your pages, you can insert rollover images simply with a few clicks of the mouse. If you prefer to edit your code by hand, you can do it this way:

The mouseover script consists of two parts. The first part of code is placed inside your <HEAD></HEAD> tags, and preloads the images for the rollover effect:

<head>
<SCRIPT language=JavaScript>
<!–
overimage=new Image(50, 20); outimage=new Image(50, 20);
overimage.src=”youroverimage.jpg”; outimage.src=”youroutimage.jpg”
//–>
</SCRIPT>
</head>

You will need to replace ‘youroverimage’ and ‘youroutimage’ with the actual images you wish to have mouseover, and the ‘50,20’ with the sizes in pixels of the images. Next we have the actual code that calls the images inside the <BODY></BODY> tags.

<body>
<a href=”yourlinkhere ” onmouseover=”image.src=overimage.src” onmouseout=”image.src=outimage.src”>
<img name=”image” src=”youroutimage.jpg” width=50 height=10 border=0></a>
</body>

On this part above you need to replace ‘yourlinkhere’ with the url when someone clicks on the image. You can just put a # if you don’t wish it to go anywhere. You also need to replace the ‘youroutimage.jpg’ with the outimage of your rollover.

Hope this helps.

Leave a Reply

Your email address will not be published. Required fields are marked *