图片库
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没有分离,没有考虑到平稳退化,渐进增强