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

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

• javascript
• jquery
• mouseover
• onmouseover

3 Answers 3

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 #)

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>

do

$('#thumbnailimg').hover(function(){
    $('#changeme').css('background-image', $(this).children('img').attr('src'));
}, function(){
    $('#changeme').css('background-image', '');
});