I have 7 thumbnail image menus.when user points(mouseover) to a particular thumbnail, I want to change the background-image of <div> to the regarding image of that thumbnail.
thumbnail images menu are in a diff div
views:
38answers:
3
+2
A:
You can use jQuery something like:
$(function(){
$('div.someclass').hover(function(){
$(this).addClass('hover_class');
}, function(){
$(this).addClass('mouseout_class');
}
);
});
Where you have specified the hover_class and mouseout_class in your style sheet with corresponding images eg
<style type="text/css">
.hover_class {
background-image: url(url 1);
}
.mouseout_class{
background-image: url(url 2);
}
</style>
Sarfraz
2010-06-21 12:59:33
but `url 1` is not fixed, as I said I have 7 thumbnails so how I can display seven diff images?
nectar
2010-06-21 16:31:22
+4
A:
Whats wrong with pure css?
div.thumbnail:hover {
background-image: url(image/in/question);
}
Simply change the div.thumbnail to reflect your div and class or id name (in case of id replace .with #)
Russell Dias
2010-06-21 13:00:27
Make sure to use a CSS Sprite to avoid a flicker in the rollover caused by the new image loading. Here is a good place to start: http://stackoverflow.com/questions/2932566/how-do-css-sprites-work
Christopher Altman
2010-06-21 13:03:43
@Sarfraz - That may not be an issue, it's not for any of my current projects, *hopefully* that's the case everywhere soon.
Nick Craver
2010-06-21 13:08:53
@Nick Craver: That's true but IE6 is still around albeit with lesser number :(
Sarfraz
2010-06-21 13:16:09
A:
do
$('#thumbnailimg').hover(function(){
$('#changeme').css('background-image', $(this).children('img').attr('src'));
}, function(){
$('#changeme').css('background-image', '');
});
jAndy
2010-06-21 13:03:22