Change Image on Mouse Over

stick man
Adding a change of image for image mouseover image changes can be used to confirm the mouse over and to indicate content available by following the link.

The original image, without the mouse over effects, is given as:
<img src=”stickman-orange.png” border=”0″  />

I have also set a size for the border of 0, ensuring that the default image border is removed.

Producing the image change effects when a mouse moves over an image are implemented with the addition of an onMouseOver and onMouseOut parameter to the <img> tag surrounding the image.

The image of the orange stick man with the blue replacement for the mouse over is shown below:

And the associated code below:

<img
  src=”http://www.vntweb.co.uk/wp-content/uploads/2013/01/stickman-orange.png”
  onmouseover=”this.src=’http://www.vntweb.co.uk/wp-content/uploads/2013/01/stickman-blue.png'”
  onmouseout=”this.src=’http://www.vntweb.co.uk/wp-content/uploads/2013/01/stickman-orange.png'”
  border=”0″  />

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.

onMouseover defines the action when the mouse hovers over the image. onMouseOut provides the action handling for the mouse moving away from the image.

As can be seen the two actions onMouseOver and onMouseOut both change the src reference of the image. this is a special reference to the item itself.

An alternative is to change the image based on mousing over, for example a hyperlink. To do this a name is given to the image, to provide a unique reference, this will not work when referencing a different item on the page. The image src is now referenced using document.menu5.src, Document is the root node of the page.

To make these actions work an additional parameter is added to the image. Naming the image provides a reference for the mouse actions.

<a href="http://www.vntweb.co.uk/"
  onMouseOver="document.menu5.src='stickman-blue.png'"
  onMouseOut="document.menu5.src='stickman-orange.png'">Home</a>
<img src="stickman-orange.png" border="0" name="menu5 alt="stick man" /">

The image of the orange stick man with the blue replacement for the mouse over is shown below. Hover over the word home below to change the image.

Home