HomeComputer programmingWeb application programmingJavascript: OnMouseOver - OnMouseOut

Javascript: OnMouseOver – OnMouseOut

This tech recipe describes a simple image link which changes upon placing the mouse over the image.


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

What You Will Need:
1) Two images, preferably the same size (for aesthetic purposes)
2) Basic text editor (Notepad or an 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 similarly, for the code to be understood properly.

*NOTE that the code is placed inside of !– — tags. The < > is in case 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. It is 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: [email protected]
-William. § (marvin_gohan)

RELATED ARTICLES

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Recent Comments

Cleveland Furia on How to Clear Google Activity
Sid Wohlfarth on How to Clear Google Activity
Riley Magsayo on How to Clear Google Activity
สมัครรับเครดิตฟรี ทันที on How to improve Remote Desktop Protocol Performance
Neal Wangstad on How to Clear Google Activity
Slavcho Andov on How to install Ubuntu
Slavcho Andov on How to fix bad sectors
Sheraz Ali on How to Backup Android