Page 1 of 1

unobtrusive image rollover - jquery?

Posted: Fri May 25, 2007 6:51 pm
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.

Posted: Fri May 25, 2007 7:33 pm
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);
    }
);

Posted: Fri May 25, 2007 8:15 pm
by Kieran Huggins
what are your constraints? I typically use the sliding door technique for pure CSS rollovers

Posted: Sat May 26, 2007 7:42 pm
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. :(

Posted: Sat May 26, 2007 11:31 pm
by s.dot
what about using css to set a height and width property, or maybe to change the display

Posted: Sun May 27, 2007 5:45 pm
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>