I have got a script that displays from an array of images but I can not get the image location to update, it displays the images correctly but only displays the location of the first image, I have had a brief look at innerhtnl but it has me a bit confused - is there anybody that can help? <!DOCTYPE HTML><html><head> <style type='text/css'> img { max-width:600px; max-height:600px;} </style> <title>(Type a title for your page here)</title> <script language='JavaScript'> var present_slide=0;var images=new Array( "./testimage/19.jpg","./testimage/1plus1.jpg","./testimage/1plus1Copy.jpg","./testimage/4plus4.jpg","./testimage/test.jpg"); objImage = new Image(); function download(img_src){ // preload the image file objImage.src=images[img_src]; } function displaynext(shift){ present_slide=present_slide + shift; if(images.length > present_slide && present_slide >= 0){ document.images["im"].src = images[present_slide]; var next_slide=present_slide + 1; download(next_slide); // Download the next image } if(present_slide+1 >= images.length ){ document.f1.Next.style.visibility = "hidden"; present_slide=images.length-1; }else{document.f1.Next.style.visibility = "visible";} if(present_slide<=0 ){ document.f1.Prev.style.visibility = "hidden"; present_slide=0; }else{ document.f1.Prev.style.visibility = "visible";} } </script> </head> <body onLoad="displaynext(0)"> <form name="f1" method=post action=""> <img name="im"></a><br> <script language="javascript"> document.write (images[present_slide]); //prints the value of present slide </script><br> <input type="button" name="Prev" value=" << " onClick="displaynext(-1);"> <input type="button" name="Next" value=" >> " onClick="displaynext(1);"> </form> </body> </html> Code (markup): many thanks for taking the time to look Mike
This might be something like what you are aiming at - no wrapping of image array indices when the starting or finishing image is reached; instead the user is guided by the visibility of the Prev & Next buttons as to which direction(s) is/are possible. Also the relevant image filename is displayed. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <style type='text/css'> img { max-width:600px; max-height:600px;} </style> <title>(Type a title for your page here)</title> <script type="text/javascript"> var images = new Array("./testimage/19.jpg", "./testimage/1plus1.jpg", "./testimage/1plus1Copy.jpg", "./testimage/4plus4.jpg", "./testimage/test.jpg"); var present_slide = 0; function preload(){ // preload the images var objImages = new Array(); for (var i=0; i<images.length; i++) { objImages[i] = new Image; objImages[i].src = images[i]; } // for initial state - no Prev button shown if (present_slide == 0) document.forms.f1.Prev.style.visibility = "hidden"; document.getElementById("show_name").innerHTML = getImgFileName(images[present_slide]); } function getImgFileName(slide) { //gets the filename (minus .ext) of present slide var char_end = slide.lastIndexOf("."); var char_start = slide.lastIndexOf("/"); return slide.substring(char_start+1, char_end); } function displaynext(shift) { present_slide = present_slide + shift; document.getElementById("show_name").innerHTML = getImgFileName(images[present_slide]); if (present_slide == images.length-1) document.forms.f1.Next.style.visibility = "hidden"; if (present_slide == 0) document.forms.f1.Prev.style.visibility = "hidden"; if (present_slide >=0 && present_slide < images.length-1) document.forms.f1.Next.style.visibility = "visible"; if (present_slide >0 && present_slide <= images.length-1) document.forms.f1.Prev.style.visibility = "visible"; document.getElementById("im").src = images[present_slide]; } </script> </head> <body onload="preload()"> <form name="f1" method="post" action=""> <img id="im" src="./testimage/19.jpg" alt="Image19"> <br> <p>Image filename is: <span id="show_name"></span></p> <br> <input type="button" name="Prev" value=" << " onclick="displaynext(-1);"> <input type="button" name="Next" value=" >> " onclick="displaynext(1);"> </form> </body> </html> Code (markup): A few pointers which might help explain it ... * document.write should not be used for updating the image source name here (or really for updating anything), as it just wipes the entire page every time it is called. innerHTML is better for this purpose - here it is acting on the span to update its contents each time a button is clicked. * a function is added to strip out the filename (without file extension) from the full image path. Just looks a bit tidier than having a convoluted pathname showing. * for the initial image, the source is set in the html - so people without JavaScript enabled will at least see the first image, rather than no images at all. * the download() function is changed, as it didn't do what that name suggests. It's now called preload() and is called on body onload event, whereupon it will start caching the images. Also it renders the "Prev" button invisible, in the initial waiting state, where no backward selecting is desirable. * using element names for JavaScript DOM references - it's OK to do that with form elements, but the name attribute for image tags has been deprecated, so it is more common nowadays to use getElementById() for DOM referencing of image elements. * a few other validation/syntax tips for modern coding - script type should be "text/javascript", event types should be all lower case (onload, onclick) and not camel case, <img> tag needs an alt attribute, and the form method should be in quotes ("post").
Many thanks. I have added a small script that auto builds the array - not sure if this is the most efficient but does what I need.