Question

So I’m learning a image replacement technique on W3, and here’s what I want:

1. There is an image of a dog.

2. When I click this image, this image will be replaced by a picture of a cat.

3. However, if I click this image again, it will be replaced again by the dog that was
   originally there.

4. And if I click once more, the cat will replace the dog.

5. And so on.

How do I go about making a permanent loop of replacing these two images?

Here’s a link that’s similar to what I want to do:

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_src

In that example if you click the image, it will replace the image once. But if you click on it a second time, the original image won’t replace it.

So yeah, any help on making an efficient algorithm that can constantly replace an original with a new image, will be greatly appreciated.

Answer 1

Try this,

<img id="img" src="cat.jpg" />​

JavaScript using jQuery,

$('#img').toggle(
    function(){
        $(this).attr('src', 'dog.jpg');
    },
    function(){
        $(this).attr('src', 'cat.jpg');
    }
);​

Here is the working demo, http://jsfiddle.net/D9VvV/