html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Snapshots</h1>
<ul id="love">
<li>
<a href="美.jpg" title="A good girl">美</a>
</li>
<li>
<a href="女.jpg" title="A good girl">女</a>
</li>
<li>
<a href="丽.jpg" title="A good girl">丽</a>
</li>
<li>
<a href="莉.jpg" title="A good girl">莉</a>
</li>
</ul>
<img id="placeholder" src="风景.jpg" alt="my image gallery" width="100" height="100"/>
<p id="description" >Choose an image</p>
<script src="lianxi.js"></script>
</body>
</html>
JS：
window.onload=prepareGallery;
function prepareGallery(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById("love")) return false;
var gallery = document.getElementById("love");
var links = gallery.getElementsByTagName("a");
for ( var i=0;i<links.length;i++) {
links[i].onclick = function () {
return showPic(this) ? false:true;
}
}
}
function showPic(whichpic){
if(!document.getElementById("placeholder")) return false;
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
if(placeholder.nodeName!="IMG") return false;
placeholder.setAttribute("src",source);
if(document.getElementById("description")){
var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):" ";
var description =document.getElementById("description");
if(description.firstChild.nodeType==3){
description.firstChild.nodeValue=text;
}
}
return false;
}
