Jabez Net rollover example - www.jabeznet.com

Home
Example of a rollover feature.
Provided by Jabez Net.

When you rollover the small images the big image changes.
When you roll off, all the big image returns to the original.
The Code is below!
If you don't want the picture to return to the original when moving
the mouse off the little picture remove the "onmouseout" portion.
Here's an example!

Big 4

<html> <head> <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <title>Jabez Net rollover example - www.jabeznet.com</title> <script type="text/javascript"> function loadImg(img){ var imgName = "big4"; // name of the big image var srcs = ["big1.jpg","big1.jpg","big2.jpg","big3.jpg","big4.jpg"]; // array of SRC's for the big images document.images[imgName].src=srcs[img]; } </script> </head> <body> <p align="center"> <a onmouseover="loadImg(0); return false;" onmouseout="loadImg(4); return false;" target="_blank" href="http://www.jabeznet.com"> <img src="small1.jpg" alt="Sheeting" style="border:2px solid #000000; width: 50px; height: 50px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px"></a> <a onmouseover="loadImg(2); return false;" onmouseout="loadImg(4); return false;" target="_blank" href="http://www.jabeznet.com"> <img src="small2.jpg" alt="Sheeting" style="border:2px solid #000000; width: 50px; height: 50px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px"></a> <a onmouseover="loadImg(3); return false;" onmouseout="loadImg(4); return false;" target="_blank" href="http://www.jabeznet.com"> <img src="small3.jpg" alt="Sheeting" style="border:2px solid #000000; width: 50px; height: 50px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px"></a> </p> <p align="center"> </p> <p align="center"> <img src="big4.jpg" alt="Big 4" style="width: 400px; height: 404px;" name="big4" border="2"></p> </p> </body> </html>