css and/or javascript change background on clicking image

Question

I have an issue where I have a div class="tasteTheRainbow" and inside are img tags. One tag in particular is a png class named .gA3.

Now tasteTheRainbow already has a css background url but when you tap or click the .gA3 I want the background url to change.

I have tried many other stackoverflow posts and found no solution.

Here is my HTML and my CSS:

<div class="tasteTheRainbow">
    <div class="greenArrow">
        <img class="gA1" src="assets/arrows/down.png"/>
        <img class="gA2" src="assets/arrows/in.png"/>
        <img class="gA3" src="assets/arrows/left.png"/>
        <img class="gA4" src="assets/arrows/out.png"/>
        <img class="gA5" src="assets/arrows/right.png"/>
        <img class="gA6" src="assets/arrows/up.png"/>
    </div>
</div>

.tasteTheRainbow {
    background-image: url(../assets/fivePix.png);
    background-repeat: repeat;
    position: absolute;
    background: url(../assets/tombrady1.jpg) no-repeat center center fixed !important;

    -webkit-background-size: cover;
    background-size: cover;
    display: block !important;
}

As I mentioned above I have tried using CSS classname:active. I have also tried multiple java script solutions and they simply do not change the background url to image1 to image2.

can you share your javascript or jquery for the click event which is supposed the trigger the background url change? — Newton Sheikh
– Newton Sheikh, Commented Apr 22, 2015 at 3:28
Get rid of !important statement. It's overriding any new background images you may declare, because it takes first priority. — M -
– M -, Commented Apr 22, 2015 at 3:57

Steven V · Accepted Answer · 2015-04-22 15:17:14Z

7

My recommended solution is to create a CSS class for both the initial state of the element (example .tasteTheRainbow) as well as the new state (example .tasteTheRainbowNew), and then use Javascript to apply/remove the class.

$(function () { 
    $(".gA3").click(function () {
         $(this).parent(".tasteTheRainbow").toggleClass("tasteTheRainbowNew"); 
    }); 
});

See my JSfiddle here: http://jsfiddle.net/oxv0rc1k/2/

Also, note that I loaded in JQuery because my JS sucks without it.

edited Apr 22, 2015 at 15:17

Steven V

16.7k3 gold badges66 silver badges77 bronze badges

answered Apr 22, 2015 at 4:23

Brian John

5993 silver badges12 bronze badges

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

3 Comments

Newton Sheikh Over a year ago

awesomeness Loaded :)

user2640633 Over a year ago

Thank you this was very easy to follow!

Brian John Over a year ago

Not a problem! Glad I could help, and thanks for marking this as the correct answer!

Collectives™ on Stack Overflow

css and/or javascript change background on clicking image

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related