Easy, Reusable Image Rollovers with jQuery

Okay, so this is my first jQuery tutorial (or any tutorial for that matter). So here goes…

In my own experience, image rollovers for navigation is a pretty repetitive task. Almost every site I build has them. For the longest time, I simply used the javascript spit out by Dreamweaver. Sure it worked, but it required including an extra javascript file, and inline javascript for mouseover and mouseout events.

The more I got into jQuery, the more I realized this was an ugly solution. And as I stopped using Dreamweaver for regular development over a year ago, I thought I’d come up with a solution that could just be easily dropped into each new site and would just work.

Before I start, I should note that usage of this script assumes a couple things. It assumes your navigation images are contained within a div with an id (I use #nav). It also assumes that your over state images are named consistently. For example, if your contact image is nav_contact.gif, your rollover image will need to be something like nav_contact_over.gif.

It also assumes your navigation is structured thusly:

<div><a><img></a><a><img></a></div>

First, make sure your jQuery code is surrounded by the usual:

1
2

$(document).ready(function() {
});

Now set up the mouseover event:

1
2

$("#nav a").mouseover(function(){
});

Next, set the source (src) of the image file. This is done by finding the child of the link that was moused over, in this case, an image.

imgsrc = $(this).children("img").attr("src");

We’ll only perform the rollover if the image state is not already “ON”.

matches = imgsrc.match(/_over/);

If it’s not, add the ‘_over’ bit to the filename and change the image source with attr(“src”):

1
2
3
4

if (!matches) {
	imgsrcON = imgsrc.replace(/.gif$/ig,"_over.gif");
	$(this).children("img").attr("src", imgsrcON);
}

And that’s it! Handling the mouseout is pretty simple. All you need to do is reset the image source to the value that was initially set on the mouseover:

1
2
3

$("#nav a").mouseout(function(){
	$(this).children("img").attr("src", imgsrc);
});

One more thing. If you have a lot of nav images, or they are not tiny files, you might want to preload them. Here is a function that will automatically preload all the images within the #nav div:

1
2
3
4
5

$("#nav img").each(function() {
	rollsrc = $(this).attr("src");
	rollON = rollsrc.replace(/.gif$/ig,"_over.gif");
	$("<img>").attr("src", rollON);
});

Line 1 creates a loop to run the following function for every image within the #nav div. Line 2 sets the image’s filename, and line 3 replaces ‘.gif’ with ‘_over.gif’. You can replace .gif with .jpg or whatever. And line 4 creates a new image element with the ON state of the image.

You can see the script in action here.
Download the .js file here.

So that’s it. This stuff is probably beyond basic for experienced jQuery users, but if you’re just getting started, hopefully this will help. I’ve got several other jQuery scripts like this, so hopefully this won’t be my last tutorial (even though this was more involved than I thought it was going to be

Tags: javascript, jquery