<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf8" />
<title></title>
<style>
ul li{float:left;
width:240px;
list-style-type:none;}
img{clear;left;
width:400px;
height:240px;}
p{clear:left;}
</style>
</head>
<body>
<h2>pictures</h2>
<ul>
<li><a href="images/1.jpg" title="A fireworks display" onclick="showPic(this);return false">fireworks</a></li>
<li><a href="images/2.jpg" title="A coffee display" onclick="showPic(this);return false">A fireworks display</a></li>
<li><a href="images/3.jpg" title="A rose display" onclick="showPic(this);return false">A fireworks display</a></li>
<li><a href="images/4.jpg" title="A fire display" onclick="showPic(this);return false">A fireworks display</a></li>
</ul>
<img id="placeholder" source="images/placeholder.jpg" alt="my images gallery">
<p id="discription">choose an image</p>
<script >
function showPic(whichpic){
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
//placeholder.src=source;
var text=whichpic.getAttribute("title");
var discription=document.getElementById("discription");
discription.firstChild.nodeValue=text;
}
</script>
</body>
</html>
1 <li><a href="images/1.jpg" title="A fireworks display" onclick="showPic(this);return false">fireworks</a></li> 中的return false是为了点击超链接是再加载出的一个页面,如果点击之后js的返回值是ture则成功点击了超链接，就会加载一个新的页面，把js的返回值设置成false就不会重新加载页面，只是执行showPic()函数；
如果没有return false,图片会在 新加载的一个页面上显示
2 placeholder.setAttribute("src",source);
一个<img>中，也就相当于添加一个src属性，不应该替换src 属性；
修改：<img id="placeholder" source="images/placeholder.jpg" alt="my images gallery">
中的source是因为粗心写错了 还是替换不是相当于添加src属性
<img id="placeholder" src="images/1.jpg" alt="my images gallery">
3 function showPic(whichpic)
如果把这个whichPic拿掉var source=whichpic.getAttribute("href");应该怎么改呢；
4 discription.firstChild.nodeValue=text; 中只有一个childNodes所以用firstChild和lastChild都可以；
5 //placeholder.src=source;
placeholder.setAttribute("src",source);为一级DOM方案移植性好，可以用在除web浏览器以外的其他应用环境里，还可以避免兼容性有关的任何问题，目前来看我还理解不到
478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
