Rollover Buttons

Here is an easy way to add rollover buttons without a lot of heavy Javascript. As long as the images are kept small, this is fast loading and works great in all browsers. It is VERY important when editing this code that you do it in a program that does not insert extra spaces or quotes. We suggest NotePad or any plain text editor.

If you have multiple buttons on your page, you will need to number each image in the array. When you add the second button everywhere it says "img1" you will need to name it "img2" for the third button name it "img3" and so on. Make sure you change the name in all three places for each button.

First, you will want to create two graphics - one for the "mouseover" button and one "mouseout" button.

Button Up Button Down

Link 1 Link 2 Link 3

<img src="img/link_1_up.gif" alt="Link 1" name="img1" onmouseover="document.img1.src='img/link_1_down.gif';" onmouseout="document.img1.src='img/link_1_up.gif';">

<img src="img/link_2_up.gif" alt="Link 2" name="img2" onmouseover="document.img2.src='img/link_2_down.gif';" onmouseout="document.img2.src='img/link_2_up.gif';">

<img src="img/link_3_up.gif" alt="Link 3" name="img3" onmouseover="document.img3.src='img/link_3_down.gif';" onmouseout="document.img3.src='img/link_3_up.gif';">

To Top TO TOP