CODEWITHSUNDEEP
javascriptjquerymouseoveronmouseover
nectar
nectar

Reputation: 9679

how to change div background image in mouse over?

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

Upvotes: 1

Views: 2787

Answers (3)

jAndy
jAndy

Reputation: 236132

do

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

Upvotes: 0

Russell Dias
Russell Dias

Reputation: 73382

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

Upvotes: 7

Sarfraz
Sarfraz

Reputation: 382851

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>

Upvotes: 2

Related Questions