Changing a background image upon 1st click - then changing it back again on the 2nd click with jquery

Question

I have a div element who's background image I want to change upon clicking the div - and then have the image change back to the original upon clicking once more. Div CSS code is below, showing its Class and ID:

.tab_box
{
width:2%;
height:20%;
position:absolute;
left:100%;
}

#tab_box1
{
background:url('cars.png') no-repeat center center;
background-size:120%;
-moz-background-size:120%;
-o-background-size:120%;
-ms-background-size:120%;
}

I have 3 other divs all using the same "class", then each has an individual "id" to give them seaprate images.

I tried the following j-query/css using toggleClass but its does not seem to work:

.one
{
width:2%;
height:20%;
background:url('mots.png') no-repeat center center;
background-size:120%;
position:absolute;
left:100%;
}
<script>
$(document).ready(function(){
$('#tab_box1').click(function() {
$('#tab_box1'').toggleClass("one")
});
});
</script>

Any suggestions as to where I am going wrong, or what method other than toggleClass could be used to switch the image to and fro?

THanks - however even when removed, the above code still does not work — Sam Friday Welch, Oct 01 '13 at 16:55
I think you're not being specific enough with your declaration in the CSS. Try changing `.one` to `#tab_box1.one`. — Chad, Oct 01 '13 at 16:59
Also, bear in mind that toggling a class does not remove the existing class-- it simply will add `.one` or remove `.one`. You don't have to redefine all of the styles-- only the background. — Chad, Oct 01 '13 at 17:05
thanks Chad for the note about the not needing to re-define all the styles - tidied up the code a little :-) — Sam Friday Welch, Oct 01 '13 at 17:24

Arun P Johny · Accepted Answer · 2013-10-01T17:03:50.913

3

it is because of css rule precedence, the id rule has precedence over class rule.

In your case the id rule #tab_box1 is having background image set, then you are trying to change it using a class rule .one.

One nasty fix is to use !important in the class rule like

.one {
    width:2%;
    height:20%;
    background:url('http://placehold.it/32/f00000') no-repeat center center !important;
    background-size:120%;
    position:absolute;
    left:100%;
}

Demo: Fiddle

The right fix will be is to use classes instead of id here, like

<div class="tab_box tab_box1">sadfsdf</div>

instead of

<div id="tab_box1" class="tab_box">sadfsdf</div>

then

.tab_box1
{
background:url('cars.png') no-repeat center center;
background-size:120%;
-moz-background-size:120%;
-o-background-size:120%;
-ms-background-size:120%;
}

Demo: Fiddle

edited Oct 01 '13 at 17:03

answered Oct 01 '13 at 16:58

Arun P Johny

384,651
66
527
531

Right gotcha - so is there a way of changing the image without altering the class? Is there a way to toggle the "id" instead? – Sam Friday Welch Oct 01 '13 at 16:59
4

Don't change what you're targeting, change how you specify the original styles. Use a class in your CSS instead of an ID. – isherwood Oct 01 '13 at 17:00
Thanks Arun - the "nasty" fix works, however my concern is why is it considered a nasty fix? would it cause complications further down the line ie with different browsers etc? – Sam Friday Welch Oct 01 '13 at 17:04
1

@SamFridayWelch because I hate using `!important`... the second solution is better – Arun P Johny Oct 01 '13 at 17:05
1

@SamFridayWelch the reason is any future changes by other css rules may not reflect because of the `!important` definition – Arun P Johny Oct 01 '13 at 17:09
Thanks Arun - The second solutions works great, I will use this instead of the !important fix. Thank you for all your help on this one – Sam Friday Welch Oct 01 '13 at 17:12

score 0 · Answer 2 · edited May 23 '17 at 12:10

This will make the div behave like a button, swapping to a different image when mouse is held down, and reverting back to the original image when mouse button is released.

$("#button1").mousedown(function() {
    $(this).css({'background-image': 'url(image2.jpg)'}) 
}).mousedown(function(){
    $(this).css({'background-image': 'url(image1.jpg)'}) 
});

HTML:

<div id="button1" style="background-image:url('image1.jpg');"></div>

Sources/References:

CSS background-image - What is the correct usage?

changing the background image on mouse down

Changing a background image upon 1st click - then changing it back again on the 2nd click with jquery

2 Answers2