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>