Image change on-click
CodeExploited posted the below script in a previous form which works great.
However, I need to change the script so that when the user clicks on the displayed image, it cylcles to the next image i.e. images are cycled through by each click.
Right now, the script uses a menu at the bottom which I don't need. How do I change this?
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Image Change Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> function changeIt(objName) { //The image object accessed through its id we mentioned in the DIV block which is going to be visible currently var obj = document.getElementById(objName); //An array that hold the IDs of images that we mentioned in their DIV blocks var objId = new Array(); //Storing the image IDs into the array starts here objId[0] = "image1"; objId[1] = "image2"; objId[2] = "image3"; objId[3] = "image4"; objId[4] = "image5"; //Storing the image IDs into the array ends here //A counter variable going to use for iteration var i; //A variable that can hold all the other object references other than the object which is going to be visible var tempObj; //The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the //only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part //of the if statement within this loop. for(i=0;i<objId.length;i++) { if(objName == objId[i]) { obj.style.display = "block"; } else { tempObj = document.getElementById(objId[i]); tempObj.style.display = "none"; } } return; } </script> </head> <body> <div id="image1"> <img src="1.jpg" border="0" alt="one" /> </div> <div id="image2" style="display:none"> <img src="2.jpg" border="0" alt="two" /> </div> <div id="image3" style="display:none"> <img src="3.jpg" border="0" alt="three" /> </div> <div id="image4" style="display:none"> <img src="4.jpg" border="0" alt="four" /> </div> <div id="image5" style="display:none"> <img src="5.jpg" border="0" alt="five" /> </div> <br><br> <a id="one" href="#" onclick="changeIt('image1');">one</a> <a id="two" href="#" onclick="changeIt('image2');">two</a> <a id="three" href="#" onclick="changeIt('image3');">three</a> <a id="four" href="#" onclick="changeIt('image4');">four</a> <a id="five" href="#" onclick="changeIt('image5');">five</a> </body> </html>
CSS Codes
Reply With Quote
Bookmarks