ansaurus

Question

Switching DIV Background Image With jQuery

Answer 1

+23 A:

$('#divID').css("background-image", "url(/myimage.jpg)");

Should do the trick, just hook it up in a click event on the element

$('#divID').click(function()
{
  // do my image switching logic here.
});

Nick 2008-10-31 14:31:48

Answer 2

+5 A:

One way to do this is to put both images in the HTML, inside a SPAN or DIV, you can hide the default either with CSS, or with JS on page load. Then you can toggle on click. Here is a similar example I am using to put left/down icons on a list:

$(document).ready(function(){
    $(".button").click(function () {
     $(this).children(".arrow").toggle();
            return false;
    });
});

<a href="#" class="button">
    <span class="arrow">
        <img src="/images/icons/left.png" alt="+" />
    </span>
    <span class="arrow" style="display: none;">
        <img src="/images/down.png" alt="-" />
    </span>
</a>

alexp206 2008-10-31 14:32:48

Answer 3

+7 A:

If you use a CSS sprite for the background images, you could bump the background offset +/- n pixels depending on whether you were expanding or collapsing. Not a toggle, but closer to it than having to switch background image URLs.

Dave Ward 2008-10-31 14:32:54

Bonus: Ifyou use separate images only the one that is displayed on load is actually loaded. There will be a small delay when switching images before the second state is loaded. With a sprite, you only have one image and it will already be there.

_Lasar 2008-10-31 15:29:04

Answer 4

+2 A:

This works on all current browsers on WinXP. Basically just checking what the current backgrond image is. If it's image1, show image2, otherwise show image1.

The jsapi stuff just loads jQuery from the Google CDN (easier for testing a misc file on the desktop).

The replace is for cross-browser compatibility (opera and ie add quotes to the url and firefox, chrome and safari remove quotes).

<html>
    <head>
     <script src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
     <script>
       google.load("jquery", "1.2.6");
       google.setOnLoadCallback(function() {
      var original_image = 'url(http://stackoverflow.com/Content/img/wmd/link.png)';
      var second_image = 'url(http://stackoverflow.com/Content/img/wmd/code.png)';

      $('.mydiv').click(function() {
          if ($(this).css('background-image').replace(/"/g, '') == original_image) {
              $(this).css('background-image', second_image);
          } else {
              $(this).css('background-image', original_image);
          }

       return false;
      });
       });
     </script>

     <style>
      .mydiv {
       background-image: url('http://stackoverflow.com/Content/img/wmd/link.png');
       width: 100px;
       height: 100px;
      }
     </style>
    </head>
    <body>
     <div class="mydiv">&nbsp;</div>
    </body>
</html>

enobrev 2008-10-31 14:33:57

putting Jquery on your site isn't that hard, why would you wanna load it off Google?

Nick 2008-10-31 14:42:01

just did it for the example. This way, the whole code snippet works on its own.

enobrev 2008-10-31 14:44:13

Loading it from Google is preferable for public facing sites. Google's CDN is very likely faster than your site, allows it to download in parallel with something else on your site, and the more sites that use it the more likely a cached copy from the user's browser will be used.

Dave Ward 2008-10-31 15:32:08

Although loading it from Google allows them to track your visitors and insert arbitrary code into your site. And if Google is down (NO WAI!!), your JS won’t work anymore.

Scytale 2010-08-16 14:12:40

Answer 5

A:

i've found a solution in a forum:

http://www.dynamicdrive.com/forums/showthread.php?t=5967&page=2

Sebastian Wolf 2010-03-24 15:43:47

Welcome to Stack Overflow, Sebastian. This question was asked over a year ago, and already has several acceptable answers.

rjh 2010-03-24 15:47:24

Answer 6

A:

I personally would just use the JS to switch between 2 classes.

Have the CSS outlining everything you need on your div MINUS the background rule, then add 2 classes (e.g: expanded & collapsed) as rules each with the correct background image (or background position if using a sprite).

CSS with different images

.div {
    /* button size etc properties */
}

.expanded {background: url(img/x.gif) no-repeat left top;}
.collapsed {background: url(img/y.gif) no-repeat left top;}

or CSS with image sprite

.div {
    background: url(img/sprite.gif) no-repeat left top;
    /* Other styles */
}

.expanded {background-position: left bottom;}

Then...

JS with images

$(function){
    $('#button').click(function(){
        if($(this).hasClass('expanded'))
        {
            $(this).addClass('collapsed').removeClass('expanded');
        }
        else 
        {
            $(this).addClass('expanded').removeClass('collapsed');
        }
    });   


}

JS with sprite

Note: the elegant toggleClass does not work in IE6, but the below addClass/removeClass method will work fine in this situation as well

most elegant solution (not IE6 friendly unfortunately)

$(function){
        $('#button').click(function(){
            $(this).toggleClass('expanded');
        });   
    }




$(function){
        $('#button').click(function(){
            if($(this).hasClass('expanded'))
            {
                $(this).removeClass('expanded');
            }
            else 
            {
                $(this).addClass('expanded');
            }
        });   
    }

As far as i know this method will work accross browsers, and i would feel much more comfortable playing with CSS and classes than with url changes in the script.

Cheers! Happy coding:) Kelly

Kelly 2010-09-27 23:12:11

ansaurus

tags:

views:

answers:

Switching DIV Background Image With jQuery

related questions