0

I have this code to change from image 1 to image 2. How can I make it change from image 2 to image 3, and back to image 1? Thanks

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()"><img id="myImg" src="image1.gif" width="107"     height="98"></button>

<script>
function myFunction()
{
document.getElementById("myImg").src="image2.gif";
}
</script>

</body>
</html>

4 Answers 4

3

http://jsfiddle.net/9R2J7/1/

var img_array = ['http://placehold.it/100x100/green', 'http://placehold.it/100x100/blue', 'http://placehold.it/100x100/red'];
i = 0;

function myFunction() {
    i++;
    document.getElementById("myImg").src = img_array[i];
    if (i == img_array.length - 1) {
        i = -1;

    }

}
1
  • nice :) .. you might wanna add the "var" on first init :)
    – Medda86
    May 4, 2014 at 23:50
1

You could do

function myFunction()
{
    if( document.getElementById("myImg").src == "image1.gif" ){
        document.getElementById("myImg").src = "image2.gif";
    }
    elseif( document.getElementById("myImg").src == "image2.gif" ){
        document.getElementById("myImg").src = "image3.gif";
    }
    else{
        document.getElementById("myImg").src = "image1.gif";
    }

}

It's not very elegant, but it could be a solution.

Kind regards.

0

Using jQuery.

change your html to something of the sort:

<button id="change-img"><img ... /></button>

Then you can add an onclick to the #change-img element. In your jQuery, add

$('#change-img').click(function() {
    var image = $('#myImg');
    var imgNum = image.attr('src').split('.')[0].replace('image', ''); // gets the number
    imgNum = (imgNum % 3) + 1;
    image.attr( { 'src' : 'image' + imgNum + '.gif' } ); // selects image, changes source
});

And there you have it.

Made a demo, similar to what you'd like to achieve: http://jsfiddle.net/94VKa/.

1
  • 1
    "if you're using jQuery, which all of us highly recommend" - do we? I quite like native JavaScript, personally... May 4, 2014 at 23:47
0

One further approach:

// initialise the array, using array-literal syntax:
var img_array = ['http://placehold.it/100x100/green',
                 'http://placehold.it/100x100/blue',
                 'http://placehold.it/100x100/red'];

function myFunction() {
   // finding where in the 'img_array' the current src is to be found:
   var current = img_array.indexOf(this.src);

   // updating the src of the clicked element, to either the next element in
   // the array (if 'current + 1' does *not* evaluate to equal the length of the
   // array, or to the first element in the array if 'current + 1' *does* equal
   // the length of the array:
   this.src = img_array[current + 1 === img_array.length ? 0 : current + 1];
}

// getting a reference to the element to click on,
// add an event-listener to 'listen' for that event, and execute the
// named function:
document.getElementById('myImg').addEventListener('click', myFunction);

JS Fiddle demo.

References:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.