Hover to change background image instead of background color

Question

could someone please guide me with this piece of codes. Currently when i mouseover a link, it change the background color on another div. Instead of changing the background color, I'd like to change to another background image.

<html>
    <head>
        <title>Sample</title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <style>
        body { 
            background: #ccc;
            transition:0.5s;
        }
    </style>
    <script type="text/javascript">
            $(document).ready(function () {
                $("#div-1").hover(
                  function () {
                      $('#top_section').css("background", "#ff9900");
                  }, 
                  function () {
                      $('#top_section').css("background", "#ccc");
                  }
                );

                $("#div-2").hover(
                  function () {
                      $('#top_section').css("background", "red");
                  }, 
                  function () {
                      $('#top_section').css("background", "#ccc");
                  }
                );

                $("#div-3").hover(
                  function () {
                      $('#top_section').css("background", "yellow");
                  }, 
                  function () {
                      $('#top_section').css("background", "#ccc");
                  }
                );
            });
        </script>
    </head>
<body>

    <a id="div-1" href="#"> Orange</a>
    <a id="div-2" href="#">Red</a>
    <a id="div-3" href="#">Yellow</a>
    <div id="top_section" style="height:100px;width:100px;"></div>
</body>
</html>

I was changing the line $('#top_section').css("background", "#ff9900"); to $('#top_section').css("background-image", "/images/image1.jpg"); but nothing happen when i mouse over the link. thank you very much,

You have to correct: .css("background-image", "/images/image1.jpg"); to .css("background-image", "url('/images/image1.jpg')"); — emmanuel
– emmanuel, Commented Oct 17, 2014 at 12:09

ckuijjer · Accepted Answer · 2014-10-17 12:10:56Z

1

You need to surround your image url with url('...').

Try changing $('#top_section').css("background-image", "/images/image1.jpg"); to $('#top_section').css("background-image", "url('/images/image1.jpg')");

Or see http://codepen.io/ckuijjer/pen/giABb for an example

answered Oct 17, 2014 at 12:10

ckuijjer

13.9k4 gold badges43 silver badges46 bronze badges

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

3 Comments

tony Over a year ago

thank you. it works. Is it possible to add a little fadein/out to it while the backgroundimage change?

ckuijjer Over a year ago

I think you can't fade in/out an image that's set using the background-image css property. If you use a regular <img /> you can, either by animating the opacity css property or using jQuery's fadeIn and fadeOut. As loading an image might take some time, which might visually interfere with fading, you might want to preload them.

tony Over a year ago

thanks for the info., also i may not want that effect on the type of the images i'm using...in the background of the images, they're (the graphic designers) using a gradient background, so when it fade - it pixelate and it looks so bad...thanks again

emmanuel · Accepted Answer · 2014-10-17 12:11:41Z

1

Since /images/image1.jpg is an URL you should do teh following:

$('#top_section').css("background-image", "url(/images/image1.jpg)")

edited Oct 17, 2014 at 12:11

emmanuel

9,61310 gold badges27 silver badges38 bronze badges

answered Oct 17, 2014 at 12:10

Vincent Beltman

2,11216 silver badges28 bronze badges

Comments

active-worker · Accepted Answer · 2014-10-17 12:14:37Z

0

I assume the path is not correct. You can try this code:

$('#top_section').css("background-image", "url(../images/image1.jpg)")

answered Oct 17, 2014 at 12:14

active-worker

561 gold badge1 silver badge8 bronze badges

Comments

chazsolo · Accepted Answer · 2014-10-17 12:24:58Z

0

Or get rid of that mess and use CSS's general sibling selector...

#div-1:hover ~ #top_section {
    background-image: url(/images/image1.jpg);
}

#div-2:hover ~ #top_section {
    background-image: url(/images/image2.jpg);
}
...

answered Oct 17, 2014 at 12:24

chazsolo

8,6541 gold badge25 silver badges45 bronze badges

Comments

tam · Accepted Answer · 2014-10-17 12:41:41Z

0

You can even shorten you code with one another way, using data- attribute

<a id="div-1" href="#" data-image="/images/image1.jpg"> Orange</a>
<a id="div-2" href="#" data-image="/images/image2.jpg">Red</a>
<a id="div-3" href="#" data-image="/images/image3.jpg">Yellow</a>
<div id="top_section" style="height:100px;width:100px;"></div>

 $(document).ready(function () {
      $("div").hover( function () {
            var img = $(this).attr('data-image'); // take the attribute value.
            $('#top_section').css("background", "url(img)");
      }, 
      function () {
            $('#top_section').css("background", "#ccc");
      }
 )}

answered Oct 17, 2014 at 12:41

tam

3621 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

Hover to change background image instead of background color

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related