CODEWITHSUNDEEP
javascripthtmlcss
RICKY DAWN
RICKY DAWN

Reputation: 29

Changing DIV Background Image with JavaScript Not Working

I'm trying to change a div background image on hover, I want to do this with JaveScript so that it works cross browser without any issues. The current code I have is:

<div class="staff" style="background-image: url(/wp-content/uploads/2013/08/IMG_1828- 300x237.png);" onmouseover="this.style.background=url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png);" onmouseout="this.style.background=url(wp-content/uploads/2013/08/IMG_1828-300x237.png);">
</div>

CSS:

.staff{
width: 300px;
height: 237px;
}

Can anybody see what is causing the problem?

Upvotes: 1

Views: 2392

Answers (8)

Samira Khorshidi
Samira Khorshidi

Reputation: 942

you can use css like this:

.staff{
width: 300px;
height: 237px;
background-image: url("/wp-content/uploads/2013/08/IMG_1828- 300x237.png");
}
.staff:hover{
background-image: url("wp-content/uploads/2013/08/IMG_1836-v2-300x237.png");
}

or javascript like: onmouseover="javascript: this.style.backgroundImage = 'url(\'image_url\')'";

Upvotes: 1

noob
noob

Reputation: 641

I think you can use this script :

 $('.staff').mouseover(function() {
        $(this).attr('style',"background:grey;");
    })
    $('.staff').mouseout(function() {
        $(this).attr('style',"background:white;");
    })

Change the color to the image path.

Upvotes: 0

Petr R.
Petr R.

Reputation: 1237

Most browser should support :hover in css, so there is no need to use JavaScript for this (relevant fiddle here):

.staff{
    width: 300px;
    height: 237px;
    background-image: url("/wp-content/uploads/2013/08/IMG_1828- 300x237.png");
}
.staff:hover{
    background-image: url("wp-content/uploads/2013/08/IMG_1836-v2-300x237.png");
}

If you really want to use JavaScript, than you have to wrap url(...) in quotes like so:

<div class="staff"
  style="background-image: url(/wp-content/uploads/2013/08/IMG_1828- 300x237.png);"
  onmouseover="this.style.background='url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png)';"
  onmouseout="this.style.background='url(wp-content/uploads/2013/08/IMG_1828-300x237.png);'">
</div>

Upvotes: 0

AnaMaria
AnaMaria

Reputation: 3621

WORKING DEMO

CHANGE I MADE

 onmouseover="this.style.background='url()';"

You have to enclose the url in single qoutes...

I would also suggest you use CSS rather than JS to do this. But since you asked how to do it in JS, this is your answer

Upvotes: 0

Lan
Lan

Reputation: 709

Better use CSS than inline CSS and javascript to achieve the effect.

If you still want to do it inline, here is a example.

jsfiddle

onmouseover="javascript: this.style.backgroundImage = 'url(\'image_url\')'";

Upvotes: 1

reidjako
reidjako

Reputation: 384

   $(document).ready(function(){
  var staff = $(".staff"); //Avoid repeated traverse

   $("img").hover(function(){
   staff.css("background",'url(' + $(this).attr('src') + ')'); 

      //Assuming you want to set current image as background image
});

    $( "img" ).mouseout(function(){
        staff.css("background","none");  
    });
   });

Okay this works for me so when you hover over an image the background of the set div is changed. So when ever you hover over an image .staff background is changed. I believe that is what you want?

Upvotes: -2

Vikas Ghodke
Vikas Ghodke

Reputation: 6665

You can use simple css too.. and it will work on all browsers

.staff { background: url("url/img.png")}
.staff:hover { background: url("url/hoverimg.png")}

<div class="staff"></div>

Upvotes: 1

John V
John V

Reputation: 875

<style>
  .staff{
      width: 300px;
      height: 237px;
      background-image: url(/wp-content/uploads/2013/08/IMG_1828- 300x237.png);
  }

  .staff:hover {
      background-image: url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png);
  }
</style>
<div class="staff"></div>

Upvotes: 1

Related Questions