Javascript: OnMouseOver - OnMouseOut

Contributed by William_Wilson March 2, 2006  
Tagged: Web application programming

A simple image link which changes upon placing placing the mouse over the image.

OnMouseOver is reasonable universal after IE4, I even believe it should work in the new Netscape engine.

What You’ll Need:
1) 2 images, preferably the same size (for asthetic purposes)
2) basic text editor (Notepad or equivalent)

-The displaying will not allow all the tags so replace * by < and $ by >.

The Code:

*html$
*head$
*title$onMouseOver JavaScript*/title$
*script language="Javascript"$
*!--
if (document.images)
{
preimage = new Image
afterimage = new Image
preimage.src = "image1.gif"
afterimage.src = "image2.gif"
}
--$
*/script$
*/head$
*body$
*a href="http://www.tech-recipes.com"
onMouseOver="document.roll.src=afterimage.src"
onMouseOut="document.roll.src=preimage.src"$

*img src="image1.gif" border=0 name="roll"$*/a$
*/body$
*/html$


-The Javascript part of this code, needs to be placed between the head /head tags.
-The spacing of the Javascript code is important, it must be oriented as above, or VERY similar, for the code to be understood properly

*NOTE that the code is placed inside of !– – tags, the < > is incase the browser does not support Javascript, then the code inside the tags can be ignored and the page will be displayed omitting the single operation.

-preimage is the image to be displayed first the location in this source, should match the image to be displayed inside the body of your html file.
-afterimage is of course the image to be displayed while the mouse is placed over the image.

-document points to the current html page, similar to this in java.

-the image is named roll so that the images associated with the rollover effect can be preloaded in the head to associate to this name.

*most names can be changed, just be sure to change all occurances of the same name!!

Questions/Comments: william_a_wilson@hotmail.com
-William. § (marvin_gohan)