How to change img url? (with/ class)

Question

Add/remove animate-in/out class it works (http://hostelgoodmo.com/test.gif), and how to change img url?

New slide => Add gif => Start gif animation => (remove old gif) Next slide => Add gif ....

Slide 1:

<li class="slide-one animate-in">
<img src="active.gif">
</li>

<li class="slide-two">
<img src="none.png">
</li>

<li class="slide-four">
<img src="none.png">
</li>

</ul>

Slide 2:

<li class="slide-one animate-out">
<img src="none.png">
</li>

<li class="slide-two animate-in">
<img src="active.gif">
</li>

<li class="slide-four">
<img src="none.png">
</li>

</ul>

Slide 3:

<ul class="animation-canvas">

<li class="slide-one animate-out">
<img src="none.png">
</li>

<li class="slide-two animate-in">
<img src="none.png">
</li>

<li class="slide-four">
<img src="active.gif">
</li>

</ul>

score 3 · Answer 1 · edited Nov 18 '13 at 13:44

3

It's pretty simple :

$('selector_to_img_tag').attr('src','what you want');

edited Nov 18 '13 at 13:44

ahren

16,803
5
50
70

answered Nov 18 '13 at 13:40

MD. Sahib Bin Mahboob

20,246
2
23
45

$(document).ready(function(){ $('.slide-one .placeimg').attr('src','slide_1.gif'); $('.slide-one.animate-out .placeimg').attr('src','none.png'); }); Does not work :( – developingidea Nov 18 '13 at 14:16
@developingidea where is the placeimg class ? – MD. Sahib Bin Mahboob Nov 18 '13 at 14:46
@developingidea follow this [answer](http://stackoverflow.com/a/1041352/1426743) to use multiple class selector – MD. Sahib Bin Mahboob Nov 18 '13 at 14:50

score 1 · Answer 2 · answered Nov 18 '13 at 13:43

Change the src attribute of the image using jQuery.

HTML :

<img src="http://www.hdwallpapersdj.com/wp-content/uploads/2013/09/cartoon-1.jpg" width="100px" height="100px" />

<input type="button" value="Change Image" />

jQuery :

$("input").click(function(){
    var newImageUrl = "http://images2.fanpop.com/image/photos/14000000/Disney-Cartoon-wallpaper-classic-disney-14019904-1024-768.jpg";
    $("img").attr("src", newImageUrl);
});

Demo

How to change img url? (with/ class)

2 Answers2