	free hosting image hosting hosting reseller online album e-shop famous people

Image Rollover Link

This is a standard image rollover script.

The link graphic will change when the mouse is over it.

Paste the code below into the head section of your page:

<script language="JavaScript">  </script>

And paste this into the body of your page:

<a href="somepage.html" ONMOUSEOVER="iName='image1' ; Ichange('changed1')" ONMOUSEOUT="Ichange('default1')"> <img src="normal.gif" alt="SomeMessage" NAME="image1" border="0"></a>

How It Works

Referring to the body code first, the image must be given a name in order for this to work properly.

If you wish to use multiple rollovers on the same page, each "normal" graphic must have an unique name - eg. name=image1, image2, ... etc.

When the mouse passes over the link graphic, that name is assigned to the variable iName, then passed to the function IChange.

In the script code, the required images are pre-loaded on entry to the page:

default1 = new Image(); default1.src = "normal.gif"
changed1 = new Image(); changed1.src = "over.gif"

where:

default1 is the normal image

changed1 is the image on mouseover

Relative or absolute URLs may be used here, depending on where the images are stored.

On mouseover, the parameter changed1 is passed to the function.

On mouseout, the parameter default1 is passed.

This parameter is then evaluated, and the .src extension is added:

var pSrc=eval(p+ ".src");

Finally, this value is written to the page using:

document[iName].src = pSrc;

In the example used below, this would translate to:

document[image1].src = over.gif (on mouseover)

document[image1].src = normal.gif (on mouseout)

Thus, if numerous rollovers are used, the value of iName will change accordingly.

This ensures that the correct mouseover image is used for the selected link.

If you wish to add extra rollover links, simply add the required details in the script section:

default1 = new Image(); default1.src = "normal1.gif"
default2 = new Image(); default2.src = "normal2.gif"
default3 = new Image(); default3.src = "normal3.gif"
changed1 = new Image(); changed1.src = "over1.gif"
changed2 = new Image(); changed2.src = "over2.gif"
changed3 = new Image(); changed31.src = "over3.gif"

And inside the img tag of each link, give the graphic a unique name:

NAME="image1"
NAME="image2"
NAME="image3"

For best results, the mouseover graphic should be the same size as the original.

Try It Out

Place your mouse over the graphic below to see the rollover effect.

Clicking the link will merely reload this page.