1 <!DOCTYPE html>
2 <html>
3 <!--我们希望做到的是
4 1.当点击某个链接，我们3希望能留在这个网页而不是转到另外一个窗口
5 2.当点击某个链接，我们希望能在这个网页上同事看到那张图片和原有的图片清单
6 -->
7 <!--
8 1.当我们触发onclick事件时，不仅showPic函数会被调用，链接也会起作用，而跳转到另外一个窗口
9 所以，这里有个知识点，对于a标签的onclick函数，如果你让onclick函数返回false，那么浏览器
10 会认为你没有点击链接，也就不会发生跳转。
11 2.如果吧a标签看成对象，你会发现这个很容易理解,我们给a标签增加了onclick函数具体的做什么事情，
12 也就是说onclick函数是a对象里的一个方法，那么这里的this就是指的就是a标签这个对象。现在你明白
13 为什么要用this了吧（想想C++、java）
14 -->
15 <head>
16 <meta charset="utf-8" />
17 <title>Image Gallery</title>
18 </head>
19 <body>
20 <h1>Snapshots</h1>
21 <ul>
22 <li><a href="images/fireworks.jpg" title="A fireworks display" onclick="return showPic(this);">Fireworks</a></li>
23 <li><a href="images/coffee.jpg" title="A cup of black coffee" onclick="return showPic(this);">Coffee</a></li>
24 <li><a href="images/rose.jpg" title="A red. red rose" onclick="return showPic(this);">Rose</a></li>
25 <li><a href="images/bigben.jpg" title="The famous clock" onclick="return showPic(this);">Big Ben</a></li>
26 </ul>
27 <img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" />
28 <p id="desp">Choose an Image</p>
29 <script type="text/javascript" src="scripts/showPic.js"></script>
30 </body>
31 </html>
showPic.js
function showPic(whichPic) {
var source = whichPic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichPic.getAttribute("title");
var txtNode = document.getElementById("desp").firstChild;
txtNode.nodeValue = text;
return false;
/*
经验总结:
1.由于js是动态语言，所以存在一个很严重的问题，
那就是你自己取的变量名称时，尽可能的采用骆驼峰写法，
并且最后借助好的编辑器，有自动补全功能的编辑器，一面
拼写错误，这种错误低级，而且查找起来十分困难。
2.如果站点用到多个js文件，因该把它合并到一个文件中。以减少请求次数，提高性能。
*/
}