Changing DIV Background Image with JavaScript Not Working

Question

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?

try wrapping url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png) in single quotes. — Jake Aitchison
– Jake Aitchison, Commented Aug 7, 2013 at 10:23
Why don't you use css background? that will also be cross browser. — Faisal Sayed
– Faisal Sayed, Commented Aug 7, 2013 at 10:24
You need to wrap your url in single quotes ' ' since it's a string literal in JS — Eric
– Eric, Commented Aug 7, 2013 at 10:26
Is there any browser that doesn't support :hover in css (click for a fiddle)? — Petr R.
– Petr R., Commented Aug 7, 2013 at 10:27

John V · Accepted Answer · 2013-08-07 10:28:08Z

1

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

answered Aug 7, 2013 at 10:28

John V

8546 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RICKY DAWN Over a year ago

How would you animate CSS while keeping it cross browser compatible? So it fades in/out?

Vikas Ghodke · Accepted Answer · 2013-08-07 10:29:14Z

1

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>

answered Aug 7, 2013 at 10:29

Vikas Ghodke

6,6635 gold badges30 silver badges38 bronze badges

Comments

Lan · Accepted Answer · 2013-08-07 10:32:52Z

1

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\')'";

answered Aug 7, 2013 at 10:32

Lan

7091 gold badge8 silver badges16 bronze badges

2 Comments

RICKY DAWN Over a year ago

Perfect works well thanks, do you know how would I add a fade effect to this?

Lan Over a year ago

I recommend you to use jquery for the fade effect. It's a javascript library that allows you to do such effects. Better than code it for yourself. Search for fade effects with jquery. Hope it helps.

Samira Khorshidi · Accepted Answer · 2013-08-07 10:44:59Z

1

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\')'";

answered Aug 7, 2013 at 10:44

Samira Khorshidi

9301 gold badge9 silver badges30 bronze badges

Comments

AnaMaria · Accepted Answer · 2013-08-07 10:37:06Z

0

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

answered Aug 7, 2013 at 10:37

AnaMaria

3,6213 gold badges21 silver badges36 bronze badges

Comments

Petr R. · Accepted Answer · 2013-08-07 10:37:08Z

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>

noob · Accepted Answer · 2013-08-07 10:37:42Z

0

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.

answered Aug 7, 2013 at 10:37

noob

6411 gold badge6 silver badges21 bronze badges

Comments

reidjako · Accepted Answer · 2013-08-07 10:29:36Z

-2

   $(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?

answered Aug 7, 2013 at 10:29

reidjako

3843 gold badges5 silver badges17 bronze badges

3 Comments

AnaMaria Over a year ago

-1 for giving a jquery answer. Jquery is not tagged and the OP did not ask for it

reidjako Over a year ago

But javascript was tagged and Jquery is only essentially a library for javascript is it not?

AnaMaria Over a year ago

Going by you logic anybody who know JavaScript should know know Jquery. However in the real world it does not work that way.

Collectives™ on Stack Overflow

Changing DIV Background Image with JavaScript Not Working

8 Answers 8

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related