图片库

html代码

　　<h1>Snapshots</h1>
    <ul>
	<li>
	　　<a href="images/1.png" onclick="showPic(this);return false;" title="代码是艺术">图片1</a>
	</li>
	<li>
	　　<a href="images/2.png"  onclick="showPic(this);return false;"title="暗色天空">图片2</a>
	</li>
	<li>
	　　<a href="images/3.png" onclick="showPic(this);return false;" title="正常天空">图片3</a>
	</li>
　　</ul>
　　<img id="placeholder" src="" alt="我的图库"/>
　　<p id="description">Choose an image.</p>

　　js代码

function showPic(whicpic){
	var source = whicpic.getAttribute("href");
	var placeholder = document.getElementById("placeholder");
	placeholder.setAttribute("src",source);
	var text = whicpic.getAttribute("title");
	var description = document.getElementById("description");
	description.firstChild.nodeValue = text; 
}

缺点是，js和html没有分离，没有考虑到平稳退化，渐进增强