unobtrusive image rollover - jquery?
Moderator: General Moderators
unobtrusive image rollover - jquery?
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:
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...
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);
}
);- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
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>