Web Hosting by Netfirms | Free Domain Names by Netfirms

Making a rollover

The term rollover is used to describe an effect that is applied to an image. The effect changes the image to a different image when the user puts the mouse over the image and when the user moves the mouse away from the image the original image is restored.

Run Code | View Code

Process

Changing the image - a function
Function: toggleImage

Events

The user puts the mouse over the picture - onmouseover event
The user puts the mouse away from the picture - onmouseout event

Input

The picture the user can see - A picture defined in the body of the document
An anchor tag to fire the events. - An anchor tag defined in the body of the document

Event Trigger

The on mouse over and on mouse out events will call the toggleImage function that will alternate the picture defined in the anchor tag

Note: The anchor tag is required instead of the image because the events can not be registered with the image since images in Netscape web browsers do not have events

The Solution

Defined an image in the body of the document, rap it in a hyperlink, register the mouse over and mouse out events of the hyperlink and force them to call a function that will toggle the image's source property.

Set up the picture

Define an image in the body of the document. <img> Set the name property so it can easily be reference <img name="pic"> Set the src property to the picture that you want displayed when the mouse is not over the picture. <img name="pic" src="images/buttonoff.gif">

Setup the anchor tag

Rap a anchor tag around the image <a> <img name="pic" src="images/buttonoff.gif"> </a> Set the href property <a href="jshortcut.com"> <img name="pic" src="images/buttonoff.gif"> </a> Register the onmouseover and onmouseout events on the anchor tag <a href=" jshortcut.com" onmouseover="" onmouseout=""> <img name="pic" src="images/buttonoff.gif"> </a> Make the events call the toggleImage function <a href="javascrpt:void(0)" onmouseover=" toggleImage()" onmouseout=" toggleImage()"> <img name="pic" src="images/buttonoff.gif"> </a>

Define toggleImage

Function analyses

The toggleImage does actually what it says it toggles the image. The function is called as soon as the user puts the mouse over the hyperlink the onmouseover event calls the function.

The function then has to decide what image( Or string value that points to a image) it should set on the "src" property of the image. It works this out by assigning the custom property "img" to the image.

This "img" property will always hold one of two values either being "on" or "off". The first time the function is called the "img" property has not been set so when evaluated it returns "null" so the alternative segment is executed which changes the image to the "on" picture and sets the "img" property and gives it the value "on".

At this point in time the user has the mouse over the image for the first time. As soon as the user moves the mouse out of the image container this function is called again (by the onmouseout event of the anchor tag).

But this time the value of "img" is "on" so the first condition is met (when it checks if the "src" property is "on") This segment then changes the images "src" value to the location of the "off" picture and finally assigns the value of "off" to the "img" property.

Comments with code

function toggleImage(){

Get a reference to the image var pic = document.pic Is the current image the on picture if(pic.img == "on"){

Change the image's src property to the off picture pic.src = "images/buttonoff.gif" Change the image's img property to "off" pic.img = "off" The current image is the off picture

}else{

Change the image's src property to the on picture pic.src = "images/buttonon.gif" Change the image's img property to "on" pic.img = "on"

}

Importent

Why give an image a name?
The image must have a "name" property so the image can be reference in the body of the document. If no "name" property is not set on the image it is more difficult and pretty mush incomprehensible to refer to the image because one would use Document.images array to get the image reference. No matter what an image reference must be made if the image's properties want to be changed. This following solution uses the "name" property method to make the image reference. The image reference is used in the toggleImage function.
What is a image realy?
When the picture is changed from one picture to another the "src" property of the image is being changed not the actual image. Think of the image as being a container for the image data, being either a "jpg" or "gif" image in most situations.

Run Code | View Code