Click each thumbnail on the photos.html page to display the corresponding large image at the placeholder position. The page effect is as follows: 1. Implementation of this function has been implemented in the previous JavaScript Museum. First, use the ul list on the page to display all the thumbnails... syntaxHighlighter. all (); click each thumbnail on the photos.html page to display the corresponding large image at the placeholder position. The page effect is as follows: 1. Implementation of this function has been implemented in the previous JavaScript Museum. First, all the thumbnails are displayed in the ul list on the page, and then JavaScript is used. The for loop checks which image is currently clicked, and finally displays the image. Three functions are used: The image display function, the placeholder pre-installed image creation, the click to display the image 2, the Code (1) to create four 400px * 300px images, then, scale down the four images to a thumbnail of 100 * PX. Put all the eight images in the images/photos folder. (2)create a new photos.html first, and copy the code of template.html to photos.html; then, replace the section where div is content with the following: copy the code Photos of the band
Copy the code 32.16modify webdesign.css style and append the following style: # imagegallery li {display: inline;} 4. Create photos. js. Used to compile the js effect copy code for the photos page/*********************** display image ***** * ***************/function showPic (whichpic) {// browser Object Detection if (! Document. getElementById ("placeholder") return false; // obtain the element var source = whichpic. getAttribute ("href"); var placeholder = document. getElementById ("placeholder"); // display the image placeholder. setAttribute ("src", source); // assign the src value of the current image to the placeholder image // set the text that shows the description image if (! Document. getElementById ("description") return false; if (whichpic. getAttribute ("title") {var text = whichpic. getAttribute ("title");} else {var text = "";} var description = document. getElementById ("description"); if (description. firstChild. nodeType = 3) {description. firstChild. nodeValue = text;} return false ;} /*************** create a positioning character preinstalled with an image ******************* * ***/function preparePlaceholder () {// browser pair Image Detection if (! Document. getElementById) return false; if (! Document. createTextNode) return false; if (! Document. createElement) return false; if (! Document. getElementById ("imagegallery") return false; // set the property var placeholder = document for the newly created element. createElement ("img"); placeholder. setAttribute ("id", "placeholder"); placeholder. setAttribute ("src ",". /images/placeholder.png "); placeholder. setAttribute ("alt", "my images"); var description = document. createElement ("p"); description. setAttribute ("id", "description"); var desctext = document. createTextNode ("select one Image: "); description. appendChild (desctext); // mount to display the newly created element var gallery = document. getElementById ("imagegallery"); insertAfter (description, gallery); insertAfter (placeholder, description);}/************** click, show image ************************/function prepareGallery () {// Object Detection if (! Document. getElementById) return false; if (! Document. getElementsByTagName) return false; if (! Document. getElementById ("imagegallery") return false; // obtain the element var gallery = document. getElementById ("imagegallery"); var links = document. getElementsByTagName ("a"); // display the current image (for loop implementation) for (var I = 0; I
