实现效果：点击图片链接，可以在当前网页显示图片，并且显示图片标题。
Html代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 2 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <title>Image Gallery</title> 7 </head> 8 <body> 9 <h1>Snapshots</h1> 10 <ul> 11 <li><a href="images/fireworks.jpg" onclick="showPic(this);return false" title="A fireworks display"> Fireworks</a></li> 12 <li><a href="images/coffee.jpg" onclick="showPic(this);return false" title="A cup of black coffee">Coffee</a></li> 13 <li><a href="images/rose.jpg" onclick="showPic(this);return false" title="A red, red rose">Rose</a></li> 14 <li><a href="images/bigben.jpg" onclick="showPic(this);return false" title="The famous clock"> Big Ben</a></li> 15 </ul> 16 <img id="placeholder" src="images/placeholder.gif"alt="my image gallery" /> 17 <p id="description">Choose an image.</p> 18 </body> 19 </html>
思路：
1、为每张图片分别创建一个网页，如果都放在一个网页里，数据量大，下载速度会变慢。
2、当点击某个连接时，可以留在这个网页而非转到另一个窗口。并且可以看到原有的图片清单。
3、为了实现第二条效果，需要增加一个“占位符”图片。“占位符”在这个主页上为图片预留一个浏览区域。在点击某个链接时，要拦截其默认行为。在点击某个链接时，把“占位符”图片替换为与那个连接相对应的图片。
js代码：
1 function showPic(whichpic) { 2 var source = whichpic.getAttribute("href"); 3 var placeholder = document.getElementById("placeholder"); 4 placeholder.setAttribute("src",source); 5 var text = whichpic.getAttribute("title"); 6 var description = document.getElementById("description"); 7 description.firstChild.nodeValue = text; 8 }
1、 此方法的两个参数：（1）打算对之进行设置的属性（src）。（2）这个属性的新属性值（保存在source中）。
2、 Whichpic代表了一个元素节点。即某个图片的<a>元素。
3、 为什么不用placeholder.src=source（老方法）.setAttribute（）方法是“第一级DOM”的组成部分之一，这个方法可以对任意元素节点的任意属性进行设置，并且可移植性好，老方法只适用于web文档，DOM适用于任何一种标记语言。（DOM是一种适用于多种环境和多种程序设计语言的通用型API）.
4、 对js函数进行功能扩展，使得在点击相应的图片链接时，图片对应的文本也可以改变。同样，设置含有两个参数的函数（1）打算对之进行设置的属性（p的文本节点的内容）。（2）这个属性的新属性值（保存在text中）。用到的属性：childNodes;nodeType;nodeValue;firstChild;lastChild。