Firstly: all of my love to Aivilo! She was instrumental in helping me figure out Javascript when I kept screwing it up! You can see the thread here where we puzzled it out, hopefully it will come in useful to anyone else looking to get into learning Javascript because it shows some rookie mistakes.

This function cycles through images when they are clicked. Originally I wanted to use it on a biography to cycle through pictures of my deer La, but never ended up drawing enough pictures for it to be useful, so it's just sitting around. It has potential for anyone looking to make any kind of slideshow effect on their page. Because I was so lost at first and originally had one idea for code, then solved that (thanks again Aivilo~!), then went back to the problem, this page has two different codes that you can copy, and they have slightly different benefits. You can pick the one that is best for your needs, I will explain them below.

You will probably need an ok understanding of HTML and CSS in order to understand this. I apologize that if I have failed to make this more transparent. You can use this anywhere for whatever, credit never necessary. Have fun and don't be afraid to ask questions if I am ever unclear with anything or if you have a specific issue, but I'm still learning myself. I want everyone to be able to make the kinds of pages they want to make. It's possible I may update the code or page from time to time if there is an error or if there is something new I want to add. I hope my trackers won't mind too much.


Click the number below several times. It will change through three different images.



This example uses only three images, but you can use as many images as you like with just a little tweaking of the code. You can also use things other than images to cycle through, such as div tags or span tags, or nearly any other HTML element that you can put on a page.


The first version of the code uses three different functions. This is the code that Aivilo solved, and it is superior if you are interested in having your images appear in different places on your page, such as clicking one image to make another image appear in a different place. If you want your images in the same place, use the second version of the code.

When image1 is clicked, then image2 is displayed and image1 is hidden
When image2 is clicked, then image3 is displayed and image2 is hidden
when image3 is clicked, then image1 is displayed and image3 is hidden

The second version of the code uses a single function. This is the code that I originally wanted, but figured out only after Aivilo helped with the first version and I was able to correct syntax errors. It is superior if you want to have your images cycle in the same place on your page every time.

When there is a click
Check to see if it was image1 that was clicked.
If image1 was clicked, then show image2 and hide image1
If image1 was not clicked, then check to see if image2 was clicked
If image2 was clicked, then show image3 and hide image2
If image2 was not clicked, then show image1 and hide image3

You will have to change your blog format to BBCode, NOT filtered HTML for this to work. You will have to place the URL links to the images that you want to use into the code I have provided, but otherwise the code is ready to use.

If you want to use the first code and put the images in different places, break it apart by the span tags and put each span tag where you want it.

It will not work to use two sets of this function on your page unless you change the IDs of the span tags that hold the images and the parameters of the methods in the JS. The reason for this is that the method I am using in Javascript called getElementByID will only use the first element on the page with a given ID. In general, don't have multiple things with the same ID attribute anyway, use class for that instead.


All of the explanation for this code can be found on W3Schools, this is actually very simple stuff. It still took me too long to learn how to do it, but I only needed two things (not counting the operators page).

W3Schools page on If-Else and If-Else-If functions
W3Schools page on GetElementbyID