Here is the simplest, shortest, fastest loading, GIF Image "RollOver" code available on the internet today!

GIF Image Rollover Code Tutorial

COPY IT

Here is a working RollOver (MouseOver) code snip you can copy and paste into your page. Change test.htm to the page you link to; and edit the GIF names, pic1.gif and pic2.gif, to your choice.

LEARN IT

This is really easy to learn using simple commands, onMouseover and onMouseout

Start with the Image you want to use as a link :
<img src="pic1.gif" width="100" height="30" >

Add an identifier id="MyLink1"
<img id="MyLink1" src="pic1.gif" width="100" height="30" >
You need this in case you have more than one link. (You would identify the second Rollover image as id=MyLink2, etc.)

Wrap some Link code around your gif <a href="test.htm"> </a> like this:
<a href="page1.htm > <img id="MyLink1" src="pic1.gif" width="100" height="30" > </a>

Now insert the tiny magic code that does the changeover: onMouseover="MyLink1.src='pic2.gif';" - add it in like this:

<a href="page1.htm onMouseover="MyLink1.src='pic2.gif';"> <img id="MyLink1" src="pic1.gif" width="100" height="30" > </a>

Now, whenever the Mouse rolls Over the image named MyLink1, it will change from pic1.gif to pic2.gif. Note the 'single quotes'! around 'pic2.gif'

To "Roll" the code back to the original image add this last bit of code :
onMouseOut="MyLink1.src='pic1.gif';"

<a href="test.htm" onMouseover="MyLink1.src='pic2.gif';" onMouseout="MyLink1.src='pic1.gif';"> <img id="MyLink1" src="pic1.gif" width="100" height="30" border="0"> </a>

THAT'S IT - TRY IT

Try it here :

(id= MyLink1)

To showthe link has been "moused over", you could use a third pic, pic3.gif, for the onMouseout:
onMouseout="MyLink2.src='pic3.gif';"

Try it here :

(id= MyLink2)

GET ROLLOVER BUTTONS

Discover a great GIF/Flash Rollover Button program here. (Free trial)

ADVANCED

You can add other commands into the link code, E.G. you can have differents pics show in a box whenever links are rolled over, like this: Roll Here | And Here

Code = <a href="test.htm" onMouseover="Box.src='box2.gif';" onMouseout="Box.src='box1.gif'">Roll Here </a>

PRELOAD THE PICS

To make your link pics work instantly, preload them with this code at the foot of the page:

<img id="preload" src="box2.gif" width="1" height="1">
<img id="preload" src="box3.gif" width="1" height="1">