gallery.html
<html>
<head>
<script type="text/javascript" src="scrpits/showPic.js"></script>
</head>
<body>
<h1>snapshots</h1>
<ul>
<li><a href="images/1.jpg" title="1" onclick="showPic(this); return false;">1.jpg</a></li>
<li><a href="images/2.jpg" title="2" onclick="showPic(this); return false;">2.jpg</a></li>
<li><a href="images/3.jpg" title="3" onclick="showPic(this); return false;">3.jpg</a></li>
<li><a href="images/4.jpg" title="4" onclick="showPic(this); return false;">4.jpg</a></li>
</ul>
<img id="placeholder" src="images/placeholder.jpg" alt="palceholder" />
</body>
</html>
showPic.js
function showPic(whichPic){
//whichPic代表了某个a元素节点
//而使用get方法后返回的是某个a元素节点的href的属性值
//也就是某个图片的相对路径
//这一个语句是为了把我们需要替换占位符的图片的路径检索出来
//以便于之后替换占位符的图片，因此source是一个图片
var source = whichPic.getAttibute("href");
//检索占位符图片所在的元素节点，并将其保存在placeholder变量中
var palceholder = document.getElementById("placeholder");
//使用set方法对placeholder的src属性进行刷，以替换图片。
//这样一来，就将src的属性替换为指定的图片了
placeholder.setAttribute("src",source);
}
注意：
1）this关键字的使用
2）return false 是表示点击这个连接没有生效【页面无跳转】，return true 就表示生效，点击后执行页面跳转。
3）操作的起点都是检索某个特定的元素节点
4）setAttribute()用来改变属性的值，而nodeValue则用来改变某个元素节点所包含的文本。