global.user Posted September 22, 2008 Share Posted September 22, 2008 HiI'm currently building a web site (but it is not online yet) and in this website, I have a page with a big central image, a previous button, and a next button. The idea is that as I click either button, it changes the image... I got the solution to that, and I've got it working pretty good.Now, my problem is there: when I arive at the end of the array containing the images, the script seems to understand that it must go back to position 0. That's all good. What doesn't work is the inverse; when I arrive to the first image (pics.position = 0) I can't go from there back to the last image.Hope that's clear enough, don't hesitate asking questions, code follows.Please help ! <!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><script type="text/javascript">function newImage(src,width,height) { var img=new Image(width,height); img.src=src; return img;}pics = [{ img : newImage("map/pic_0.jpg",64,64),},{ img : newImage("map/pic_1.jpg",64,64),},{ img : newImage("map/pic_2.jpg",64,64),}];pics.position=1;function nextImage(id) { pics.position++; document.getElementById(id).src=pics[pics.position].img.src;}function prevImage(id) { pics.position=pics.position-1; document.getElementById(id).src=pics[pics.position].img.src;}</script><style type="text/css">.style3 { text-align: center;}.style12 { font-family: "Times New Roman", Times, serif; font-size: small;}</style></head><body> <p class="style3"> <button onclick="nextImage('dynamic')" style="background-color:transparent"> <img alt="Zoom In" src="map/zoom_in.jpg" width="50" height="50" /> <br /> <span class="style12"> <em>zoom in</em> </span> </button> <button onclick="prevImage('dynamic')" style="background-color:transparent"> <img alt="Zoom Out" src="map/zoom_out.jpg" width="50" height="50" /> <br /> <span class="style12"> <em>zoom out</em> </span> </button> </p> <p class="style3"> <img alt="Map" id="dynamic" src="map/pic_1.jpg" width="467" height="350" class="style11" /> <br /> </p></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted September 22, 2008 Share Posted September 22, 2008 Try this. pics.position = 0;function nextImage(id) { pics.position++; if (pics.position >= pics.length) { pics.position = 0; } document.getElementById(id).src = pics[pics.position].img.src;}function prevImage(id) { pics.position--; if (pics.position < 0) { pics.position = pics.length - 1; } document.getElementById(id).src = pics[pics.position].img.src;} Link to comment Share on other sites More sharing options...
global.user Posted September 23, 2008 Author Share Posted September 23, 2008 OK works good thanks !If anyone wants to use the code provided here, it's all good with me... :) See yah Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.