212

I am making an expand/collapse call rates table for the company I work for. I currently have a table with a button under it to expand it, the button says "Expand". It is functional except I need the button to change to "Collapse" when it is clicked and then of course back to "Expand" when it is clicked again. The writing on the button is a background image.

So basically all I need is to change the background image of a div when it is clicked, except sort of like a toggle.

Improve this question
3
  • 3
    Why a background image? Why not text? Commented Sep 4, 2012 at 19:41
  • 1
    I voted down because he didn't accept the answer several years from now, hope he is OK though @user1040899! Commented Dec 9, 2015 at 3:33
  • @user1040899 zuk1 Last seen Aug 9 '10 at 0:42 at SO maybe that's why, :( Commented Nov 3, 2016 at 11:17

14 Answers 14

Reset to default
459 
$('#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. });
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

@fuccboi it does, as I use this code to fire off an animated svg checkmark when a user selects an option. :)
Good answere, i want do point out >> url() IS PART OF THE STRING << which is really confusing if you are coming from a strong typedef language
61

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

Have the CSS outline everything you need on your div MINUS the background rule, then add two 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...

JavaScript code with images

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

JavaScript with sprite

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

The most elegant solution (unfortunately not Internet Explorer 6 friendly)

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

Improve this answer

1 Comment

"Note: the elegant toggleClass does not work in Internet Explorer 6"
49

There are two different ways to change a background image CSS with jQuery.

  1. $('selector').css('backgroundImage','url(images/example.jpg)');
  2. $('selector').css({'background-image':'url(images/example.jpg)'});

Look carefully to note the differences. In the second, you can use conventional CSS and string multiple CSS properties together.

Improve this answer

3 Comments

2. is incorrect an invalid. Stringing multiple properties together is done like this: $('selector').css({'background-color':'yellow','background-image':'url()'})
If I try 2. , I get an error - Uncaught SyntaxError: Unexpected token :
Correctly, but i had to use the whole path to make it work! Not working: "url(../images/img.jpg)"
17

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.

Improve this answer

1 Comment

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

Here is how I do it:

CSS

#button{ background-image: url("initial_image.png"); } #button.toggled{ background-image:url("toggled_image.png"); }

JS

$('#button').click(function(){ $('#my_content').toggle(); $(this).toggleClass('toggled'); });
Improve this answer

2 Comments

you eventually may use the jQuery .toggleClass() feature.
Found out about toggleClass two days after I posted this :P
10

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>
Improve this answer

Comments

6

Mine is animated:

$(this).animate({ opacity: 0 }, 100, function() { // Callback $(this).css("background-image", "url(" + new_img + ")").promise().done(function(){ // Callback of the callback :) $(this).animate({ opacity: 1 }, 600) }); });
Improve this answer

Comments

5

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"></script> <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>
Improve this answer

7 Comments

just did it for the example. This way, the whole code snippet works on its own.
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.
If Google goes down and I'm still alive; let me know.
@Nick Go to jQuery.com, you'll find their own website uses <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
@Nick The question should really be, why wouldn't you want to load if off Google. :-)
|
5

I did mine using regular expressions, since I wanted to preserve a relative path and not use add the addClass function. I just wanted to make it convoluted, lol.

$(".travelinfo-btn").click( function() { $("html, body").animate({scrollTop: $(this).offset().top}, 200); var bgImg = $(this).css('background-image') var bgPath = bgImg.substr(0, bgImg.lastIndexOf('/')+1) if(bgImg.match(/collapse/)) { $(this).stop().css('background-image', bgImg.replace(/collapse/,'expand')); $(this).next(".travelinfo-item").stop().slideToggle(400); } else { $(this).stop().css('background-image', bgImg.replace(/expand/,'collapse')); $(this).next(".travelinfo-item").stop().slideToggle(400); } } );
Improve this answer

Comments

3

Old post, but this would allow you to use an image sprite and adjust the repeat as well as positioning by using the shorthand for the css property (background, repeat, left top). 

$.each($('.smallPreview'), function(i){ var $this = $(this); $this.mouseenter(function(){ $this.css('background', 'url(Assets/imgs/imgBckg-Small_Over.png) no-repeat 0 0'); }); $this.mouseleave(function(){ $this.css('background', 'url(Assets/imgs/imgBckg-Small.png) no-repeat 0 0'); }); });
Improve this answer

Comments

3

I always use a timestamp as well to prevent browsers from caching the image. For example, if the user is rotating their avatar, it will often get cached and appear to not change. 

var d = new Date(); var t = d.getTime(); $('#avatar').css("background-image", "url(" + iPath + "?" + t + ")");
Improve this answer

Comments

2

I've found a solution in a forum, Toggle Background Img.

Improve this answer

1 Comment

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

CSS Sprites work best. I tried switching classes and manipulating the 'background-image' property with jQuery, none worked. I think it's because the browsers (at least the latest stable Chrome) can't "reload" an image already loaded.

Bonus : CSS Sprites are faster to download and faster to display. Less HTTP requests means faster page load. Reducing the number of HTTP is the best way to improve front end performance, so I recommend going this route all the time.

Improve this answer

Comments

2

This is a fairly simple response changes the background of the site with a list of items

function randomToN(maxVal) { var randVal = Math.random() * maxVal; return typeof 0 == 'undefined' ? Math.round(randVal) : randVal.toFixed(0); }; var list = [ "IMG0.EXT", "IMG2.EXT","IMG3.EXT" ], // Images ram = list[parseFloat(randomToN(list.length))], // Random 1 to n img = ram == undefined || ram == null ? list[0] : ram; // Detect null $("div#ID").css("backgroundImage", "url(" + img + ")"); // push de background
Improve this answer

2 Comments

Simple? It could be much simpler. Why random?
Because the user is easier to see what changes the background, and do change :). Sorry for my English

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.