iriecircle Posted May 25, 2011 Share Posted May 25, 2011 Hi, I found this script on w3schools.com but how do I modify it so that users and click on a number like Previous 1 2 3 4 5 6 Next. Please help. Here is the code and site url http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_array_next <html> <head> <script type="text/javascript"> myImages=new Array(); myImages[0]="w3schools.gif"; myImages[1]="bulbon.gif"; myImages[2]="landscape.jpg"; myImages[3]="w3schools.gif"; myImages[4]="bulboff.gif"; myImages[5]="smiley.gif"; imagecounter=myImages.length-1; i=0; function first() { document.getElementById('imageviewer').src=myImages[0]; i=0; } function previous() { if (i>0) { i--; document.getElementById('imageviewer').src=myImages; } } function next() { if (i<imagecounter) { i++; document.getElementById('imageviewer').src=myImages; } } function last() { document.getElementById('imageviewer').src=myImages[imagecounter]; i=imagecounter; } </script> </head> Thanks Quote Link to comment Share on other sites More sharing options...
hemo-ali Posted May 26, 2011 Share Posted May 26, 2011 Use this code <html> <head> <script type="text/javascript"> myImages=new Array(); myImages[0]="images/101010.jpg"; myImages[1]="images/131313.jpg"; myImages[2]="images/151515.jpg"; myImages[3]="images/u3.jpg"; myImages[4]="images/u4.jpg"; myImages[5]="images/151515.jpg"; imagecounter=myImages.length-1; i=0; function first() { document.getElementById('imageviewer').src=myImages[0]; i=0; } function previous() { if (i>0) { i--; document.getElementById('imageviewer').src=myImages[i]; } } function next() { if (i<imagecounter) { i++; document.getElementById('imageviewer').src=myImages[i]; } } function last() { document.getElementById('imageviewer').src=myImages[imagecounter]; i=imagecounter; } function change(str){ document.getElementById('imageviewer').src=myImages[str]; } </script> </head> <body> <center> <form> <input type="button" value="First" onclick="first()"> <input type="button" value="previous" onclick="previous()"> <input type="button" value="1" onclick="change(0)"> <input type="button" value="2" onclick="change(1)"> <input type="button" value="3" onclick="change(2)"> <input type="button" value="4" onclick="change(3)"> <input type="button" value="5" onclick="change(4)"> <input type="button" value="6" onclick="change(5)"> <input type="button" value="Next" onclick="next()"> <input type="button" value="Last" onclick="last()"> </form> <img id="imageviewer" src="images/101010.jpg" alt="w3Scools" width="100" height="30" /> </center> </body> </html> explaining:- if you will use 5 images only I made buttons by the numbers of the images then I made function named change(str) this function gets the str value and then use the array to change the image **notice you should change the images as you want Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.