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>