TUTORIAL: A Simple, Effective jQuery Image Rollover

By Kai Gittens | January 12, 2010 | Tutorials |tags: javascript jquery legacy| reading time: 2 min

I used the following code to create the image rollovers for the recent Almay project I worked on.

Truthfully, I wasn't going to post this: I found it on another site and felt that re-posting it here would be claiming it as my own creation. But I found quite a few other sites using the exact same script, so I'm not the only one re-posting it. Plus, this rollover code works…well, I might add. It doesn't use CSS, making it much more cross-browser compliant; it's not as buggy as some other JavaScript rollover code I've encountered, and it gets the job done with very little code.

I'm viewing all those other re-posts as an endorsement of how almost-perfect this code is. Here's my endorsement:



<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>A Simple jQuery Image Rollover</title>

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$("img.rollover").hover(
function() { this.src = this.src.replace("_off", "_on");
},
function() { this.src = this.src.replace("_on", "_off");
});
});
</script>

</head>
<body>

<a href="#"><img src="imageOne_off.png" class="rollover" /></a>
<br />
<a href="#"><img src="imageTwo_off.png" class="rollover" /></a>

</body>
</html>

First, make sure that you create your rollover images. Each individual rollover needs two images attached to it: one named yourFilename_off.gif and the other named yourFilename_on.gif. As long as these images are of the same file type, it doesn't matter what file type it is. GIF, JPEG, PNG…it doesn't matter. For this example, I have four images that will be used in two rollovers:


imageOne_off.png

imageOne_on.png

imageTwo_off.png

imageTwo_off.png

And now the code breakdown…

We make sure to embed the jQuery library into our web page grabbing the one stored over at jquery.com:

Next, we tell jQuery that every time an image tag with a class name of “rollover” gets moused over, it should simultaneously perform two tasks:

it should see if the image contains the word “_off” in the filename…if it does, replace it with “_on” which will force the “_on” version of image to load.
it should see if the image contains the word “_on” in the filename…if it does, replace it with “_off” which will force the “_off” version of image to load.


<script type="text/javascript">
$(document).ready(function() {
$("img.rollover").hover(
function() { this.src = this.src.replace("_off", "_on");
},
function() { this.src = this.src.replace("_on", "_off");
});
});
</script>

And from here, we just place the images on the web page, making sure that they have a class name of “rollover”:


<a href="#"><img src="imageOne_off.png" class="rollover" /></a>
<br />
<a href="#"><img src="imageTwo_off.png" class="rollover" /></a>

That's it!!! The best rollover code I've ever used!!!

One more jQuery-related post, then it's time to discuss HTML5 video!!!!!!