How to change between 3 images with javascript onClick event?

Question

I have simple html and Javascript code shown below where image1 is displayed, and when it is clicked it changes to image2. I am having a problem extending this to a third image such that if image2 is clicked, it changes to image3 and finally if image3 is clicked that it returns to image1 and the cycle can be repeated once more. Can anyone suggest to me what the best approach is because I think that the way I am currently doing it for 2 images won't work for what I have described. Thanks

Note:This is a problem I have encountered for exam preparation and as such I can't use JQuery-must be JavaScript.

<html> 
<head> 
<script> 
function preloadImages() { 
Image1=new Image(); 
Image1.src = "image1.jpg";
} 

</script> 
</head> 
<body onLoad="preloadImages();"> 
<img name="myButton" src="image2.jpg"
onClick="document.myButton.src='image1.jpg';" 
onClick="document.myButton.src='image2.jpg';"> 
</body> 
</html>

adeneo · Accepted Answer · 2014-04-19 11:47:38Z

5

How about event listeners and an array of images that can be extended to any number you like

<html>

    <head></head>

    <body>
        <img id="myButton" src="image2.jpg" />
        <script type="text/javascript">
            var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'],
                i = 1;

            // preload
            for (var j=images.length; j--;) {
                var img = new Image();
                img.src = images[j];
            }

            // event handler
            document.getElementById('myButton').addEventListener('click', function() {
                this.src = images[i >= images.length - 1 ? i = 0 : ++i];
            }, false);
        </script>
    </body>

</html>

FIDDLE

edited Apr 19, 2014 at 11:47

answered Apr 19, 2014 at 11:40

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

2 Comments

kellzer Over a year ago

Could you explain this line of code a little for me if you don't mind. I'm having trouble understanding what is going on here. Thanks-sorry I'm very new to JavaScript (no problem if you don't explain-appreciate your answer!) Thanks. 'this.src = images[i >= images.length - 1 ? i = 0 : ++i];'

adeneo Over a year ago

It's a ternary, a shortened if/else statement. If i is over the number of images, we start at 0 again (the first image), otherwise we use i + 1 to get the next image etc.

Jeremy J Starcher · Accepted Answer · 2014-04-19 11:44:22Z

0

<html> 
<head> 
<script> 

var imagesNames = ["Image1.jpg", "Image2.jpg", "Image3.jpg"];

function preloadImages() { 
  for (var i = 0 ; i < imagesNames.length; i++) {
    var img = new Image();
    img.src = imageNames[i];
  }
} 

var imageIndex = 0;
img.onclick = function() {
  imageIndex++;
  if (imageIndex > imagesNames.length) {
    imageIndex = 0;
  }

  document.getElementById("myButton").src = imageNames[imageIndex];
}

</script> 
</head> 
<body onLoad="preloadImages();"> 
<img id="myButton">
</body> 
</html>

answered Apr 19, 2014 at 11:44

Jeremy J Starcher

24k6 gold badges56 silver badges75 bronze badges

1 Comment

Lugia101101 Over a year ago

Slight improvement, since imageNames[imageNames.length] never exists try changing imageIndex > imageNames.length to imageIndex >= imageNames.length or imageIndex > imageNames.length - 1.

Community · Accepted Answer · 2017-05-23 12:13:58Z

0

you can toggle between three classes and attach different images to all classes to see how to toggle between three classes check this question here. You can also use an array and assign src of images to the array and assign one to your img at a time.Hope it helps

var mylinks = new Array();
mylinks[0] = "abc.jpg";
mylinks[1] = "xyz.jpg";
mylinks[2] = "lmn.jpg";

first assign one say (var i=0) and you assign mylinks[i] and then (i=i+1) and assign mylinks[i] and keep on doing it till i> mylinks.length then start-over i.e i=0;

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Apr 19, 2014 at 11:38

Aameer

1,3761 gold badge11 silver badges30 bronze badges

1 Comment

kellzer Over a year ago

Thanks for your answer-I was trying a few things with arrays already so might give that another go. I should have mentioned in my post that this is for preparation for an exam and I can't use jQuery-just JavaScript. Thanks

sudhan kantharuban · Accepted Answer · 2014-04-19 11:48:11Z

0

HTML :

<img name="myButton" id="myButton" data-img="1" src="image1.jpg" />

JS:

var imgList = ["image1.jpg","image2.jpg", "image3.jpg" ];

var myButton = document.getElementById("myButton");
myButton.onclick = function( e ){
    var elem = e.target,
    imageIndex = parseInt(elem.dataset.img,10);
    if( imageIndex <= (imgList.length -1) ) {
        elem.src = imgList[imageIndex++];
        elem.dataset.img = imageIndex;
    } else {
        elem.src = imgList[0];
        elem.dataset.img = 1;
    }
}

Fiddle : http://jsfiddle.net/aslancods/ry6hS/

answered Apr 19, 2014 at 11:48

sudhan kantharuban

2,1451 gold badge14 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to change between 3 images with javascript onClick event?

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related