changing and changing back image with jquery

Question

I found a way to change an image when clicking on it... but im searching to make a loop, means to click again and get back the old image and then click again to get the new image (only 2 images needed).

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ChangeImage").click(function(){
$('#ChangeImage').attr('src','image2.jpg');
});
});
</script>
<img src="image1.jpg" name="my_pic" id="ChangeImage">

I cant find a way to make it vice versa...thanks for your help!!

Joseph Silber · Answer 1 · 2013-01-27T21:02:54.633

2

You can pass a function to attr, which will pass in the current src. Check that before changing:

$("#ChangeImage").click(function () {
    $(this).attr('src', function (index, currentSource) {
        return currentSource == 'image2.jpg' ? 'image1.jpg' : 'image2.jpg';
    });
});

Here's the fiddle: http://jsfiddle.net/3yZNT/

If you're using a more modern version of jQuery (1.6+), you should use prop instead of attr.

edited Jan 27 '13 at 21:02

answered Jan 27 '13 at 20:15

Joseph Silber

214,931
59
362
292

Could you explain the `i` and `v` inside the function for me? – Bram Vanroy Jan 27 '13 at 20:18
I thought you should only use `prop` if it's a `property`. However, `src` is really an `attribute` and therefore should use `attr()`. – Sparky Jan 27 '13 at 20:21
Quote: [_"As of jQuery 1.6, the `.prop()` method provides a way to explicitly retrieve `property` values, while `.attr()` retrieves `attributes`."_](http://api.jquery.com/prop/) – Sparky Jan 27 '13 at 20:23
@Sparky - Just because the `src` is originally set via an attribute does not mean that it's not a property. [When the DOM is constructed, it'll add that property to the HTML element](http://stackoverflow.com/questions/5874652/prop-vs-attr#answer-7572855). – Joseph Silber Jan 27 '13 at 20:28
So by that explanation and logic, I'm having a hard time figuring out when it would be more appropriate to use `attr()` over `prop()`. – Sparky Jan 27 '13 at 21:02
@Sparky - `attr` will get you the value of the attribute, while `prop` will get you the value of the property. Here's a fiddle demonstrating that: http://jsfiddle.net/4tQVS/ – Joseph Silber Jan 27 '13 at 21:06
@PaulG.Nahed - What do you mean by "its not working"? Does the fiddle work the way you want it to? – Joseph Silber Jan 27 '13 at 21:07
Click the image to toggle it: – Paul G. Nahed Jan 27 '13 at 21:33
this is the file i created using your code...and yes the fiddle is working fine but my file is not working i dont know why.. – Paul G. Nahed Jan 27 '13 at 21:34
@PaulG.Nahed - That's not how you load scripts. You cannot load anexternal file in the same script that you're putting code into. Use two separate `script` tags: ` ` – Joseph Silber Jan 27 '13 at 22:05
@JosephSilber
Click the image to toggle it:

lol i cant find anything wrong :/..its 1 AM here...when I use those cat photos it works but with my images its not
– Paul G. Nahed Jan 27 '13 at 22:17
yea..i tried to put one cat image and 1 own image it is working and i can change images...but when i put 2 images located in htdocs it only change once from old to new image only..i cnt get back to the old one...very strange – Paul G. Nahed Jan 27 '13 at 22:32
Quote: _"`attr` will get you the value of the attribute, while `prop` will get you the value of the property."_ Well yeah, I already understand that, hence my very first comment. But if all `attributes` are also stored as `properties` in the DOM, why would we ever need jQuery `.attr()`, and why is it better to use `.prop()` for `src` when `src` is an `attribute`? – Sparky Jan 27 '13 at 23:03
@Sparky - I linked to [this fiddle](http://jsfiddle.net/4tQVS/) before. When changing the property, the attribute usually won't change with it. If you want access to the original value in the attribute, you can only get to it through `.attr()` – Joseph Silber Jan 27 '13 at 23:07

score 0 · Answer 2 · answered Jan 27 '13 at 20:20

0

Here is another way to do it

$("#ChangeImage").click(function() {
    $(this).find('img').toggle();
});

<div id="ChangeImage"><img src="image1.png"/>
<img src="image2.png" style="display:none"/>
</div>

answered Jan 27 '13 at 20:20

lambda

3,295
1
26
32

changing and changing back image with jquery

2 Answers2

Click the image to toggle it: