Monday, March 12, 2007

I've been using jQuery for a while now on a few projects and thought I would share a simple rollover snippet that I created. Simply add the class 'rollover' to an anchor tag surrounding an image you wish to add the hover event to and make sure you have saved an image with the same name + '_o' (eg. home.gif & home_o.gif) in the same directory (obviously this is pretty easy to modify) and voila! A nice unobtrusive rollover script. I also created a preloader based on the same concept. If anyone has a better way of doing this please leave a comment, I'd be interested to see if it can be improved.


$(".rollover").hover(
 function() {
  curr = $(this).find("img").attr("src");
  overlen = curr.length;
  over = curr.substr(0, overlen-4);
  over = over+'_o.gif';
  $(this).find("img").attr({ src: over});
 },
 function() {
  $(this).find("img").attr({ src: curr});
 }
)

$(".rollover").find("img").each(function(i) {
  temp = this.src;
  prelen = temp.length;
  pre = temp.substr(0, prelen-4);
  pre = pre+'_o.gif';
  preload_image_object = new Image();
  preload_image_object.src = pre;
});

Jon 11:55 AM Permalink

Comments:

Instead of adding the class "rollover" to the image it needs to be added to the link that contains the image, ie:
<a href="etc" class="rollover"><img ...

Also this whole code block needs to be put inside the document ready event.

$(document).ready(function(){

//the listed code

});

posted by Anonymous Catalyst : 5:48 AM

remind, that when you use an underscore in the img src attribute, this rollover will not work in internet explorer!

instead of using the naming convention "image_on.jpg" etc, replace the underscore. then it will work cross browser like!

posted by Anonymous Anonymous : 11:28 PM

Catalyst I was assuming that people would realise that the code should go in a $(document).ready() block, maybe I shouldn't assume! Also yes I made a mistake in my description, you should add it to the anchor tag not the img as this code does a find on the nodes inside the anchor tag.

As for the comment on not using underscores, I'm not convinced on that! This code worked on PC IE6, IE7, Firefox 2, Mac Safari 2 and Firefox 2.

posted by Blogger Jon : 8:48 AM

This is good little script. I was trying to write a similar script on my own with jquery, but since I am brand new to it, I struggled with some of the nuances.

fyi - It seems to work fine for me on both IE6+IE7

thanks!

posted by Anonymous Anonymous : 5:29 AM

I've met the same problem with underscore '_' character in image name in IE7 (not tested with IE6)- changing attr 'src' made IE crazy (red 'x' image placeholder instead of expected result).

posted by Blogger Jakub : 3:59 AM

thnks, I'm new to jquery this is a modified version,
I prefer a _off _on convention

$(".roll").hover(
function() {
curr = $(this).find("img").attr("src");
over = curr.replace(/_off\./, '_on.');
$(this).find("img").attr({ src: over});
},
function() {
$(this).find("img").attr({ src: curr});
}
)

$(".roll").find("img").each(function(i) {
temp = this.src;
pre = temp.replace(/_off\./, '_on.');
preload_image_object = new Image();
preload_image_object.src = pre;
});


(work with any extension like .jpeg to)

posted by Anonymous felix : 10:41 PM

Thanks for the advice. I liked Felix's tweak only I am just trying to do a rollover on hover, on click will show and hide a div so there was no need for anchor tags. So here's the jQuery without the A tags, just add the 'roll' class to each of the images you want to have this behavior:
$(document).ready(function(){
$(".roll").hover(
function() {
curr = $(this).attr("src");
over = curr.replace(/_off\./, '_on.');
$(this).attr({ src: over});
},
function() {
$(this).attr({ src: curr});
}
)
$(".roll").each(function(i) {
temp = this.src;
pre = temp.replace(/_off\./, '_on.');
preload_image_object = new Image();
preload_image_object.src = pre;
});

posted by Blogger mahalie : 11:00 AM

Post a Comment