Angelfire - Script Library

Build > Script Library > Image Rollover Script

Script Library: Image Rollover

This script converts an image when the user places the mouse pointer over the image.

Example:

Follow the editing instructions after the // and after the  to customize the script, after you copy and paste it into your HTML editor.

<script language="JavaScript"> var n3 = false; image1 = new Image(); // Place your first image within the // quotation marks on the line below. image1.src = "http://af.lygo.com/d/scriptlib/mouse_off1.gif"; image1on = new Image(); // Place your second image within the // quotation marks on the line below. image1on.src = "http://af.lygo.com/d/scriptlib/mouse_on1.gif" image2 = new Image(); // Place your first image within the // quotation marks on the line below. image2.src = "http://af.lygo.com/d/scriptlib/mouse_off2.gif"; image2on = new Image(); // Place your second image within the // quotation marks on the line below. image2on.src = "http://af.lygo.com/d/scriptlib/mouse_on2.gif" function on3(name) { document[name].src = eval(name + "on.src"); } function off3(name) { document[name].src = eval(name + ".src"); } n3 = true; function on(name) { if (n3) on3(name); } function off(name) { if (n3) off3(name); } </script>   <a href="http://www.angelfire.com" onmouseover="on('image1');" onmouseout="off('image1')">  <img src="http://af.lygo.com/d/scriptlib/mouse_off1.gif" border="0" name="image1"></a> <br><br>  <a href="http://www.angelfire.com" onmouseover="on('image2');" onmouseout="off('image2')">  <img src="http://af.lygo.com/d/scriptlib/mouse_off2.gif" border="0" name="image2"></a>