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

Single Image Rollover

This script lets you do an image rollover using only one image!

How?

The image is initially treated with a style-sheet grey filter, which removes all colour content from the graphic.

On mouseover, the filter is removed, and the image's true colour is restored.

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

<style> img { filter:gray() } </style> <script type="text/javascript"> function color(elmnt) { elmnt.style.filter=false } function gray(elmnt) { elmnt.style.filter="gray()" } </script>

Now place the code below into the body section:

<a href="yourpage1.html"><img border="0" onmouseover="color(this)" onmouseout="gray(this)" src="image1.gif"></a> <br> <a href="yourpage2.html"><img border="0" onmouseover="color(this)" onmouseout="gray(this)" src="image2.gif"></a> <br> <a href="yourpage3.html"><img border="0" onmouseover="color(this)" onmouseout="gray(this)" src="image3.gif"></a>

How It Works

A grey filter is applied to each image in the style section:

<style>
img { filter:gray() }
</style>

This filter removes all colour information from the graphic, leaving it monochrome.

When the mouse moves over a particular image, the function color(this) is called, where:

this = the image under the mouse

The variable elmnt stores the location of the image in question - like a temporary ID.

The filter is then removed from that image, restoring its normal colour:

elmnt.style.filter=false

When the mouse moves off the image, the function gray(this) is called.

This simply re-applies the grey filter:

elmnt.style.filter="gray()"

The end result - a single image rollover !

What if you don't want all graphics on the page to be greyed-out?

Then just omit the onMouseover and onMouseout sections from those particular links.

Single Image Rollover

How It Works

Try It Out