How to change an image to another image on click

Question

We are currently creating an image inside a holder (ch-item) as shown below:

<div class="ch-item ch-img-1"><img src="/images/image1.jpg" alt="" />

We are having problems getting the image to appear at all. Apologies for our lack of understanding. Javascript is not our strong point.

If possible we would also like to make this image change to another when clicked, and repeat this process six times in all, so each time it is clicked it changes to another image.

We would greatly appreciate any help. Thank you!

The div shouldn't affect the img displaying unless there is some CSS preventing it from doing so. Please post your current CSS and Javascript for review. Also, not sure if your are and just omitted it, but you do not have a closing div tag. — Shawn Jacobson, May 04 '15 at 19:31
Welcome to Stackoverflow. Please do some research before asking a question, [this question has already been asked](http://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery). Also while this is a Q&A site, we advise you to try and do everything you can to solve your problem before asking a question, it should be your last resort. — Spencer Wieczorek, May 04 '15 at 19:31
Also, did you check that the file in `/images/image1.jpg` exist? — Spencer Wieczorek, May 04 '15 at 19:34

score 1 · Accepted Answer · answered May 04 '15 at 19:49

1

Without using jQuery, you could do like this

<div class="ch-item ch-img-1"><img src="./images/image1.jpg" alt="" id='img'/></div>
<script type='text/javascript'>
    var images = ['./images/image1.jpg','./images/image2.jpg','./images/image3.jpg'];
    var i = 0;
    var tagImg = document.getElementById('img');
    tagImg.onclick = function() {
        this.src = images[++i % images.length];
    }
</script>

You can add to the array as many images as you want.

answered May 04 '15 at 19:49

jairhumberto

535
1
11
31

This is awesome. Thanks! Only problem we are encountering is occasionally an image isn't being drawn from the array but I presume this is a problem on our end? – Joe May 04 '15 at 20:04
@Joe using firefox with firebug plugin is quite useful to find bugs like those. You just click at the firebug button, then at the console tag, then refresh the page, you will see the cause of errors when they happen. – jairhumberto May 04 '15 at 20:42
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/76932/discussion-between-jairhumberto-and-seth-mcclaine). – jairhumberto May 04 '15 at 20:55

Seth McClaine · Answer 2 · 2015-05-04T21:02:31.260

JS fiddle example:

http://jsfiddle.net/jo0g79ky/1

Note: In this example you can extend how many images to cycle through simply by adding/removing paths the the images array (currently there are 3).

HTML

<div class="ch-item ch-img-1">
   <img src="http://nycgfx.com/shawnmartinbrough/galleries/content/00_start/02_SequentialArt/SEQUENTIAL-World%20War%20HULK-2.jpg" alt="" />
</div>

JS

var i = 1;
$('img').click(function() {
    var images = [    "http://nycgfx.com/shawnmartinbrough/galleries/content/00_start/02_SequentialArt/SEQUENTIAL-World%20War%20HULK-2.jpg",
    "http://motorcitytimes.com/mct/wp-content/uploads/2013/10/sequential-photos-2-880x288.jpg",
    "http://www.gearlicio.us/wp-content/uploads/s3/1476-110621238-vintage-1970s-sequential-circuits-prophet-5/IMG_3317-2.jpg"];

    $(this).attr('src', images[i]);
    if (i < images.length) {
        i++;
    }
});

How to change an image to another image on click

2 Answers2