Make your own free website on

Javascript Mouseover Tutorial

...Hover Buttons...

Ever wonder how they do that effect where the graphic changes everytime you move your cursor over it? Well, the magic trick is to have TWO graphics and a java script that tells the browser which graphic to display when.

Source code: Go to the source code page and right click to view the source. If you view the source in Internet Explorer you can just cut and paste the code right into your own page. Then you can make any changes necessary to set up your web page. For your mouseover images to work they must be the exact same size.
Brief Basics of the Script
This line is telling the browser that when the mouse is over the image to look for the image1 called psp6.gif.
image1on = new Image(); image1on.src = "psp6.gif";

This next line is telling the browser that when the mouse is off the image to look for the image1 called pspall.gif.
image1off = new Image(); image1off.src = "pspall.gif";

This section will setup your link and display the images. It is telling the browser that it should display the image1 called pspall.gif to begin with - at a set height and width. The alternate name of the image1 is mouseover image. When the mouse is over image1 turn it on and when the mouse is out, turn it off. This image will be linked to the webpage mouseimg2.html.
<a href="mouseimg2.html" onMouseOver="turnOn('image1')" onMouseOut="turnOff('image1')"> <img name="image1" src="pspall.gif" alt="mouseover image" width=63 height=46 border=0></a>

Main Page