CODEWITHSUNDEEP
jquerycss
tony
tony

Reputation: 101

Hover to change background image instead of background color

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,

Upvotes: 1

Views: 1398

Answers (5)

tam
tam

Reputation: 352

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");
      }
 )}

Upvotes: 0

chazsolo
chazsolo

Reputation: 8439

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);
}
...

Upvotes: 0

active-worker
active-worker

Reputation: 56

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

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

Upvotes: 0

Vincent Beltman
Vincent Beltman

Reputation: 2104

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

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

Upvotes: 1

ckuijjer
ckuijjer

Reputation: 13814

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

Upvotes: 1

Related Questions