Javascript Images Gallery

File directory:

Gallery.html

<! DOCTYPE html>When I tried many times, I find the solvement:i forget to add "return true" at the end of function showpic (). <=== This is a correct solvement
--><li><a href= "images/fireworks.jpg" title= "a fireworks display" onclick= "showpic (this); return false "> Fireworks </a></li><li><a href=" images/coffee.jpg "title=" a cup of black coffee " Onclick= "Showpic (this); return false "> Coffee </a></li><li><a href=" Images/rose.gif "title=" A Rose "onclick=" Showpic ( this); return false "> Rose </a></li><li><a href=" images/bigben.jpg "title=" the famous Clock "onclick= "Showpic (this); return false "> Big Ben </a></li></ul><p id=" description "> Choose an image. </p><!--When we choose a picture, the content of <p> would also change. --><script src= "Showpic.js" ></script></body>
Showpic.js
/* To change placeholder.jpg into what picture we want */function showpic (whichpic) {if (!document.getelementbyid) return F Alse;var Source = Whichpic.getattribute ("href"), var placeholder = document.getElementById ("placeholder"); Placeholder.setattribute ("src", source);//change the content of <p>var text = Whichpic.getattribute ("title"); var Description = document.getElementById ("description");/* If we use ' description.nodevalue ', what we obtain are not the Conte NT of &LT;P&GT;, but null (NodeValue attribute of the element itself was an empty value), because the content of <p> I s another child node, it's the first child node of <p>. We should use follows to obtain It.*/console.log (description.childnodes[0].nodevalue);//This sentence equal to "console. Log (Description.firstchild.nodeValue); ", however, in fact, Chrome can is only read Childnodes[0], not firstchilddescription . Childnodes[0].nodevalue = Text;console.log (description.childnodes[0].nodevalue);/* The value of the NodevaLue properties of Object description ' s first child node was set to the value of the variable text. */
　　　　　　　　　　　　　　return true;} /* Whichpic stands an element node, specifically, it's a <a> pointed a picture. We need fracture the path of the picture and this can is made by transfer attribute "href" to getattribute (). Then we should save the this path in Var source. Next, we also need to obtain placeholder.jpg, to aviod repeating the same operation, put this element to a viriable ' place Holder ". Last, use SetAttribute () to finish the function Showpic (). *///follow function just to show nodeType how to Workfunction Countbodychild () {var body_element = document.getElementsByTagName ("Body") [0];console.log (Body_ Element.childNodes.length); Console.log (Body_element.nodetype);} /* We can find that the number of body ' s element are far more than We expected. Because ChildNodes would return all types nodes and not only element nodes. However, every node has a NodeType attribute, this can let us know what type the nodes is. If It is element node, NodeType returns 1; Attibute node returns 2; Text node returns 3.*/window.onload = Countbodychild; 
All the code explanations are in the code! O (*￣▽￣*) o
Here's how: the first page
When clicked:
Javascript Images Gallery