How to change css property of content:url in jquery?

Question

I have a problem:

<div id="arrow"></div>
<div id="p0" style="content: url(images/cerchioSelezionato.png)"></div>
<div id="p1" style="content: url(images/cerchio.png)"></div>

My goal is: when i click on #arrow element, I want that the image of #p0 become cerchio and vice versa for this I wrote this code in jQuery:

$(document).ready(function(){
    $("#arrow").click(function(){
       $("#p1").attr({content:url(images/cerchioSelezionato.png)});
       $("#p0").attr({content:url(images/cerchio.png)});
    }
}

When I click on arrow in chrome the console gives me this error:

Uncaught ReferenceError: url is not defined 
slider_script.js:12(anonymous function)     slider_script.js:12m.event.dispatch jquery-1.11.1.min.js:3r.handle

the value needs to be a quoted string

charlietfl
– charlietfl

2014-12-05 14:54:47 +00:00
Commented Dec 5, 2014 at 14:54 — charlietfl
– charlietfl, Commented Dec 5, 2014 at 14:54

bob-fornal · Accepted Answer · 2014-12-05 14:54:56Z

4

Try ...

$(document).ready(function(){
    $("#arrow").click(function(){
       $("#p1").attr({style: "content:url(images/cerchioSelezionato.png)" });
       $("#p0").attr({style: "content:url(images/cerchio.png)" });
    }
}

You're changing the Style attribute, but the content attribute.

answered Dec 5, 2014 at 14:54

bob-fornal

5,1205 gold badges34 silver badges45 bronze badges

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

Comments

Yotam Omer · Accepted Answer · 2014-12-05 15:07:05Z

3

Use .css() instead of .attr() to manipulate the style. Also, I think you forgot to quote.

$(document).ready(function(){
    $("#arrow").click(function(){
       $("#p1").css({content:'url(images/cerchioSelezionato.png)'});
       $("#p0").css({content:'url(images/cerchio.png)'});
    });
});

While the keys don't have to be quoted in Javascript object, the values have to be.

Since you only change the content you can use the syntax .css('content', ... ) instead of the object notaion. I kept it the way you did it so you may add rules in the future.

edited Dec 5, 2014 at 15:07

answered Dec 5, 2014 at 14:54

Yotam Omer

15.4k11 gold badges65 silver badges65 bronze badges

Comments

Mohamed-Yousef · Accepted Answer · 2014-12-05 15:01:48Z

0

you can try this one also

$(document).ready(function(){
    $("#arrow").click(function(){
       $("#p1").css('content','url(images/cerchioSelezionato.png)');
       $("#p0").css('content','url(images/cerchio.png)');
    }
}

answered Dec 5, 2014 at 15:01

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to change css property of content:url in jquery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related