Changing an Image for Mouse Rollover

Producing the image change effects when a mouse moves over an image are easy to implement. All actions are contained within the <a href > tag surrounding the image. For clarity lets first view our image tag with the surrounding <a href> tag.

<A HREF="http://www.myWebSite.com/help.html"><IMG SRC="/Portals/0/help.gif" BORDER="0" NAME="menu5"></a>

Notice here that we have given a name to our image. We have also set a size for the border, otherwise a border will appear around the image, detracting from our presentation.  Below we have added the javascript which will control the actions for when the mouse moves over our image.

<A HREF="http://www.myWebSite.com/help.html"
  onMouseOver="document.menu5.src='helpOver.gif'"
  onMouseOut="document.menu5.src='help.gif'">
<IMG SRC="/Portals/0/help.gif" BORDER="0" NAME="menu5">
</a>

Take care when using the above code not to miss the use of single quotes around the image name, inside the onMouseover and onMouseOut event handlers.