Mouseover Image Effects

Many people use mouseover image effects, largely for menus. At one point, I had a number of icons on the site using JavaScript to change them as you hover over, this is a simple rundown of how that can be achieved.

Starting Out

Now if we just want to add an image to our page we can use something like:

<img src="images/image1.gif" alt="" />

Which would display our image -->

However, because we're going to be using JavaScript later on to change that image, we need to be able to refer to it somehow, so the first thing to do is give it a name:

<img src="images/image1.gif" name="butterfly" alt="" />

So we've set the image that we want on the page as standard, next thing is to add the JavaScript 'events' that will make the image change.

The two events we need to use are:

• onmouseover - (runs a certain piece of script when you hover your mouse over the object)
• onmouseout - (runs a certain piece of script when you take your mouse away from an object)

Now we also need to give a name to each piece of script or "function" that's going to run when we call these events, i'll use "imagegrey()" and "imagecolour()" so we need to add this to our <img> tag:

<img src="images/image1.gif" name="butterfly"
alt="" onmouseover="imagecolour()" onmouseout="imagegrey()" />

So this tells the script that 'onmouseover' it needs to run the function named imagecolour() and 'onmouseout' it needs to run the function named imagegrey().

The Functions

Here's the two we're going to use and how they work:

function imagegrey() {
    document.images["butterfly"].src = "images/image1.gif";
}
function imagecolour() {
    document.images["butterfly"].src = "images/image2.gif";
}

If you read across the script, it's quite easy to understand, e.g the first one "in the 'document' change the 'image' named 'butterfly' to images/image1.gif"

So now we have everthing we need, don't forget these functions need to be inside your <script></script> tags.

One more thing before i add this to the page. When you use events like onmouseout and onmouseover, the object needs to be a link in order for the page to be valid HTML 4.01 (otherwise it messes up in old versions of netscape i think) you don't really need to do this because on current netscape versions, and the other browsers, there's no problem, but if you do want your page to validate and don't want to link the image anywhere, you could use a false/void link, like so:

<a href="javascript:void(0)"><img src="images/image1.gif" name="butterfly"
alt="" onmouseover="imagecolour()" onmouseout="imagegrey()" style="border:0" /></a>

I also added border="0" to the tag else when you link an image you'll get a nasty blue border around it.

Of course if you want the image to link somewhere just replace the javascript:void(0) with your page/url, now if we add our functions and this to our page we should have our mouseover effect.

A little like this:

Multiple Images

Ok, we have our mouseover image, but what if you want to use more than one image? well you could write two functions, one for each but there's an easier way to do it. There's actually several ways but i used the following method with variables.

I'll use two sets of images for the example, but you can add as many as you like with the same method. The images will be our butterfly again and this little guy

The first thing we need to do is create the variables for our images.

var butterfly_grey = "images/image1.gif";
var butterfly_colour = "images/image2.gif";
var littleguy_grey = "images/image3.gif";
var littleguy_colour = "images/image4.gif";

You don't need to use the extensions "_grey" and "_colour" you could use _on and _off or whatever you like. This is how we need to change the onmouseover and onmouseout events in our <img> tags:

<a href="javascript:void(0)"><img src="images/image1.gif" name="butterfly"
onmouseover="imagecolour('butterfly')" onmouseout="imagegrey('butterfly')"
style="border:0" /></a>

<a href="javascript:void(0)"><img src="images/image3.gif" name="littleguy"
onmouseover="imagecolour('littleguy')" onmouseout="imagegrey('littleguy')"
style="border:0" /></a>

So basically we've added the name used in our variables, into the onmouseover() and onmouseout() events. Now we need to make some changes to the functions that we used before.

function imagegrey(imagename) {
    document.images[imagename].src = eval(imagename + "_grey");
}
function imagecolour(imagename) {
    document.images[imagename].src = eval(imagename + "_colour");
}

The "imagename" used three times in each function can be called anything you like, then we use eval() which is a built in javascript function that will take the "imagename" add it to the text "_grey" or "_colour" and basically 'read through it' as if it were a normal line of JavaScript.

That's about it, the variables need to be added to the section with our functions inside your <script></script> tags, so the whole code should look something like this.

* in the <head></head> section of your page.

var butterfly_grey = "images/image1.gif";
var butterfly_colour = "images/image2.gif";
var littleguy_grey = "images/image3.gif";
var littleguy_colour = "images/image4.gif";

function imagegrey(imagename) {
    document.images[imagename].src = eval(imagename + "_grey");
}
function imagecolour(imagename) {
    document.images[imagename].src = eval(imagename + "_colour");
}

* and where you want to use the images

<a href="javascript:void(0)"><img src="images/image1.gif" name="butterfly"
onmouseover="imagecolour('butterfly')" onmouseout="imagegrey('butterfly')"
style="border:0" /></a>

<a href="javascript:void(0)"><img src="images/image3.gif" name="littleguy"
onmouseover="imagecolour('littleguy')" onmouseout="imagegrey('littleguy')"
style="border:0" /></a>

And the result: