Subhash's Guide: Image Rollover Script

You would have come across a lot of image links that change when you bring your mouse over them. We will also create one such script. The default picture would be 'a.jpg'. When the mouse is taken over it, 'b.jpg' should be displayed. The necessary code is:

<!--Put this in the HEAD Section--> <script language="JavaScript"> var image1on = new Image(); image1on.src = "b.jpg"; var image1out = new Image(); image1out.src = "a.jpg"; </script> <!--Put this in the BODY Section--> <a href="URL"    onMouseOver="image1.src=image1on.src;"    onMouseOut="image1.src=image1out.src;"> <img src="a.jpg" name="image1"> </a>

In the above script the <img> tag is a object. This object is placed within the <a> tags. When the user brings his mouse over the <img> object placed within <a>, the 'onMouseOver' event is triggered. The image object is referred by its name 'image1' (names are case-sensitive).

In the <script> tag a new image object is created when we specify:
   image1on = new Image();
The image path of this object is specified by:
   image1on.src = "b.jpg";
These above line preloads the graphic 'b.jpg' in the browser's cache. The other lines in the <script> tag similarly creates an image object by the name 'image1out' & preloads that object's image file 'a.jpg'.

Now when the user's mouse comes over the <img> enclosed between the <a> tags, the image path of the 'image1' object is changed to that of the 'image1on' object:
   onMouseOver = "image1.src = image1on.src;"
The reverse takes place when the mouse comes out of the <a> tag.

Do try out Subhash's Roll Maker. This tool enables one to create JavaScript rollovers instantly.