Home > Developer > JavaScript
<! 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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
</Head>
<Body>
<H1> Snapshots <Ul>
<Li>
<A href = "images/Chrysanthemum.jpg" onclick = "showPic (this); return false;" title = "A Chrysanthemum display"> Chrysanthemum </a>
</Li>
<Li>
<A href = "images/Desert.jpg" onclick = "showPic (this); return false;" title = "A Desert display"> Desert </a>
</Li>
<Li>
<! -- Call the showPic (this) method when you click. Here, this is the current node and return false: indicates that this link is not clicked. -->
<A href = "images/Hydrangeas.jpg" onclick = "showPic (this); return false;" title = "A Hydrangeas display"> Hydrangeas </a>
</Li>
<! -- Display the image below -->
<! -- Change the font by id -->
<P id = "description"> Choose an image. </p>
</Ul>
<Script src = "file. js"> </script>
</Body>
</Html>
JavaScript
Function showPic (whichpic ){
Var source = whichpic. getAttribute ("href ");
Var placeholder = document. getElementById ("placeholder ");
Placeholder. setAttribute ("src", source );
Var text = whichpic. getAttribute ("title ");
Var description = document. getElementById ("description ");
Description. firstChild. nodeValue = text;
}
ChildNodes: Get the array of Child Nodes
NodeType: Node Type
Element Node: 1
Attribute node: 2
Text node: 3
NodeValue: node Value
FirstChild: The first subnode
LastChild: Last subnode
From the xtcpcgx Column
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
