Image rollover

Image rollover

On web sites throughout the Internet you will have seen the effect whereby a link image changes when you move the mouse over it.

Firstly you need to create two images to be your links - an inactive image and an active image, the active image being that which is displayed when the mouse moves over the graphic. Then you need to insert the following JavaScript into the <HEAD> of your document. This example will show how to incorporate 2 rollover images in the same script.

<script language="JavaScript" TYPE="text/javascript">  </SCRIPT>

Now we need to display the images on the page and tell the JavaScript code that the cursor is on top of the image. To distinguish between the images, each one is assigned a unique NAME attribute.

<A HREF="#images" onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')"><IMG NAME="img2" BORDER=0 HEIGHT=25 WIDTH=90 SRC="pulpoff.jpg" ALT="[city]"></A> <BR> <A HREF="#images" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')"><IMG NAME="img1" BORDER=0 HEIGHT=25 WIDTH=90 SRC="frankoff.jpg" ALT="[happy]"></A>

How it looks:

Only adverts below!