unobtrusive image rollover - jquery?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

unobtrusive image rollover - jquery?

Post by Luke »

I am having a very difficult time coming up with an unobtrusive way to do image rollovers with or without javascript. Does anybody know of a good way to accomplish this? I usually just use regular links with background images, but that isn't an option for this particular instance.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Is it all images? or just certain ones (i.e. class="rollover")

How are you naming the images? (image.jpg/image_over.jpg, etc)


Assuming you're using a standard (and therefore regex'able) naming scheme...

Code: Select all

$('img.rollover').hover(
    function() {
        //over
        var newImage = $(this).attr('src').replace(/^(.*?)(\.(?:gif|jpg|png))$/, "$1_over$2"); //adjust for your scheme
        $(this).attr('src', newImage);
    },
    function() {
        //out
        var newImage = $(this).attr('src').replace('_over', '');
        $(this).attr('src', newImage);
    }
);
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

what are your constraints? I typically use the sliding door technique for pure CSS rollovers
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

that's what I usually do too Kieran. The images are semi-transparent pngs and in order for them to work in ie6, they have to be actual images on the page with a height and width attribute. :(
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

what about using css to set a height and width property, or maybe to change the display
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

jQttr! (?)

Code: Select all

$(function(){
	$('a img.rollover').css('border-width','0').wrap($('<div class="rollover"/>')).parent().each(function(){
		$(this).css({'cursor':'pointer','overflow':'hidden','height':$(this).children('img').height()/2,'width':$(this).children('img').width()}).mouseover(function(){
			$(this).children('img').css('margin-top',0-$(this).children('img').height()/2);
		}).mouseout(function(){
			$(this).children('img').css('margin-top',0);
		});
	});
});

Code: Select all

<a href="somewhere/awesome"><img class="rollover" src="path/to/img.jpg"/></a>
Post Reply