Simple jQuery script for swapping images on hover/rollover

Here's a little jQuery snippet that I use often. It lets you easily specify a 'hover-state' image for any html element with class 'rollover.' Just set the rel attribute to equal the rollover image, and the src attribute to equal the original.


jQuery(document).ready(function($) {

//rollover swap images with rel
var img_src = "";
var new_src = "";

$(".rollover").hover(function(){
  //mouseover

  img_src = $(this).attr('src'); //grab original image
  new_src = $(this).attr('rel'); //grab rollover image
  $(this).attr('src', new_src); //swap images
  $(this).attr('rel', img_src); //swap images

},
function(){
  //mouse out

  $(this).attr('src', img_src); //swap images
  $(this).attr('rel', new_src); //swap images
});

//preload images
var cache = new Array();
//cycle through all rollover elements and add rollover img src to cache array
$(".rollover").each(function(){
var cacheImage = document.createElement('img');
cacheImage.src = $(this).attr('rel');
cache.push(cacheImage);
});
}

HTML



UPDATE

Added preload script to code. This will load all rollover images via jquery on pageload, thereby preventing any image loading delay.

On , Deniz said...

How can we add fade effect on this?

On , Marc Shor said...

Hi,

I'm having problems getting this to work. Here's what I've put on my page:

<script type="text/javascript">
jQuery(document).ready(function($) {

//rollover swap images with rel
var img_src = "";
var new_src = "";

$(".rollover").hover(function(){
//mouseover

img_src = $(this).attr('src'); //grab original image
new_src = $(this).attr('rel'); //grab rollover image
$(this).attr('src', new_src); //swap images
$(this).attr('rel', img_src); //swap images

},
function(){
//mouse out

$(this).attr('src', img_src); //swap images
$(this).attr('rel', new_src); //swap images
});

//preload images
var cache = new Array();
//cycle through all rollover elements and add rollover img src to cache array
$(".rollover").each(function(){
var cacheImage = document.createElement('img');
cacheImage.src = $(this).attr('rel');
cache.push(cacheImage);
});
}
</script>
<p><a href="/projects/berg"><img height="176" src="/sites/default/files/images/projects-berg.jpg" rel="/sites/default/files/images/projects-berg-ro.jpg" class="rollover" style="padding:0px 3px 3px 0px;" width="176" /></a><a href="#" id="click2"><img height="176" src="/sites/default/files/images/projects-mckenzie.jpg" style="padding:0px 3px 3px 3px;" width="176" /></a><a href="#" id="click3"><img height="176" src="/sites/default/files/images/projects-rohrbach.jpg" style="padding:0px 3px 3px 3px;" width="176" /></a><a href="#" id="click4"><img height="176" src="/sites/default/files/images/projects-tallbarn.jpg" style="padding:0 0 3px 3px;" width="176" /></a><a href="#" id="click1"><img height="176" src="/sites/default/files/images/projects-walker2.jpg" style="padding:3px 3px 3px 0px;" width="176" /></a><a href="#" id="click1"><img height="176" src="/sites/default/files/images/projects-berg.jpg" style="padding:3px;" width="176" /></a><a href="#" id="click2"><img height="176" src="/sites/default/files/images/projects-mckenzie.jpg" style="padding:3px;" width="176" /></a><a href="#" id="click3"><img height="176" src="/sites/default/files/images/projects-rohrbach.jpg" style="padding:3px 0px 3px 3px;" width="176" /></a></p>

I'm trying to get the first image to have a rollover, but it's not working (once I get the first image working, I'll add the rollover state to the rest of the images). I've checked that the rel src is correct, and there are no errors in the code. Can anyone help me out?

You can also view this page at: http://lostarts.wwwsr4.supercp.com/projects

Thanks.

On , Marc Shor said...

I figured out how to fix my own problem, which never happens! Gotta go celebrate, but first, here's the code that works in Drupal 7:

<script type="text/javascript">
$(document).ready(function() {
//rollover swap images with rel
var img_src = "";
var new_src = "";
$(".rollover").hover(function(){
//mouseover
img_src = $(this).attr('src'); //grab original image
new_src = $(this).attr('rel'); //grab rollover image
$(this).attr('src', new_src); //swap images
$(this).attr('rel', img_src); //swap images
},
function(){
//mouse out
$(this).attr('src', img_src); //swap images
$(this).attr('rel', new_src); //swap images
});
//preload images
var cache = new Array();
//cycle through all rollover elements and add rollover img src to cache array
$(".rollover").each(function(){
var cacheImage = document.createElement('img');
cacheImage.src = $(this).attr('rel');
cache.push(cacheImage);
});
})(jQuery);
</script>

<p><a href="/projects/berg"><img height="176" src="/sites/default/files/images/projects-berg.jpg" rel="/sites/default/files/images/projects-berg-ro.jpg" class="rollover" style="padding:0px 3px 3px 0px;" width="176" /></a><a href="#" id="click2"><img height="176" src="/sites/default/files/images/projects-mckenzie.jpg" style="padding:0px 3px 3px 3px;" width="176" /></a><a href="#" id="click3"><img height="176" src="/sites/default/files/images/projects-rohrbach.jpg" style="padding:0px 3px 3px 3px;" width="176" /></a><a href="#" id="click4"><img height="176" src="/sites/default/files/images/projects-tallbarn.jpg" style="padding:0 0 3px 3px;" width="176" /></a><a href="#" id="click1"><img height="176" src="/sites/default/files/images/projects-walker2.jpg" style="padding:3px 3px 3px 0px;" width="176" /></a><a href="#" id="click1"><img height="176" src="/sites/default/files/images/projects-berg.jpg" style="padding:3px;" width="176" /></a><a href="#" id="click2"><img height="176" src="/sites/default/files/images/projects-mckenzie.jpg" style="padding:3px;" width="176" /></a><a href="#" id="click3"><img height="176" src="/sites/default/files/images/projects-rohrbach.jpg" style="padding:3px 0px 3px 3px;" width="176" /></a></p>

Add new comment

About text formats

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.