Comments on: Even Easier jQuery Rollovers

By: Hover Image Swap for non-link Images | Web Tech Mechanic

Hover Image Swap for non-link Images | Web Tech Mechanic — Wed, 13 Jan 2010 11:46:43 +0000

[...] http://www.atlantajones.com/we.....rollovers/ [...]

By: jonny

jonny — Mon, 17 Aug 2009 22:23:51 +0000

cheers! beats the way i was doing it!

By: Atlanta Jones

Atlanta Jones — Mon, 06 Jul 2009 19:58:34 +0000

Yeah, it would be fairly simple. I’ll work on getting something posted.

By: Robert

Robert — Mon, 06 Jul 2009 19:55:13 +0000

Do you have a version of this using a click event to activate one of images to display a thrid image. So you have an on image, off image and clicked image that stays active untl the user moves that mouse over one of the other images. I am trying to use this code for a tri state rollover.

Thanks for providing these tutorials.

By: Atlanta Jones

Atlanta Jones — Wed, 28 Jan 2009 02:12:11 +0000

Yeah, I need to do a better job of pointing people to the more recent tutorial. Glad you like it, though!

By: rgz0r

rgz0r — Wed, 28 Jan 2009 01:55:41 +0000

Ah, after implementing the earlier rollover script, I came across this one. Much better & no errors!

By: Atlanta Jones

Atlanta Jones — Sun, 18 Jan 2009 20:01:02 +0000

@OLEIRO Hmm, I’m not sure that would really work out. If I’m reading this right, the .hover event would fire on every nav item (with the .rollover class), so it would do rollovers on every single nav item on every hover. Seems like that wouldn’t be the desired result.

Also, it means that you’d have to hard-code all your image sources in the script. With my method, it doesn’t matter what the images are named or how many they are, you’ll never have to adjust the script to accommodate them.

And lastly, I’m not sure why you have two nested $(document).ready() statements.

By: Oleiro

Oleiro — Sat, 17 Jan 2009 18:36:08 +0000

A short version – I used “1″ and “2″ instead of “on” “off”:

$(document).ready(function(){
$(document).ready(function () {
$(“.rollover”).hover(
function(){$(this).attr(“src”, $(this).attr(“src”).replace(“1.jpg”,”2.jpg”));},
function(){$(this).attr(“src”, $(this).attr(“src”).replace(“2.jpg”,”1.jpg”));}
);
});
});

By: Atlanta Jones

Atlanta Jones — Sat, 13 Dec 2008 16:02:49 +0000

Wow, thanks for the heads up! I just upgraded to Wordpress 2.7 a couple days ago and I think that broke it. I had been including Wordpress’ own jquery.js and for some reason it wasn’t working in the tutorials anymore. Once I grabbed a clean jQuery 1.2.6 and put it into the tutorial folder, it started working again. That’ll teach me to rely on any of WP’s assets for my tutorials Thanks again.

By: Kendra

Kendra — Sat, 13 Dec 2008 01:26:36 +0000

I viewed the “script in action” page in several browsers, but nothing happens when I roll over the images.