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.

<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>

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>

---

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">

Comments