Herself’s Webtools

Mouse rollovers in javascript

A rollover is a javascript that lets a new image or message appear when the mouse is hovering over an image or link. There are two images for each link. The first shows when the mouse is not over the image the second show when the mouse is over the link.

HTML/Javascript code:

< a href=”http://www.anypage.com”
onMouseover=”document.dummy.src=’mouseoverpicture.jpg’”
onMouseout=”document.dummy.src=’mousenotover.jpg”
> img src=”images/mousenotover.jpg” name=”dummy” < /a >

The mouseoverpicture.jpg is the image that shows while the mouse is over the link. The mousenotover.jpg is the image that shows while you do not have the mouse over the link. You may use a name other than ‘dummy’ in the name and the onMouseover/out, but be sure it is consistent. You may use any type images recognized by html, jpg, gif
or png.

Rollover Example