1.onclick="showPic(this); return false;" 获取图片地址
showPic.js
1 function showPic(whichpic) { 2 var source = whichpic.getAttribute("href"); // 获取该元素的'href'属性的值 3 var placeholder = document.getElementById("placeholder"); // 通过document获取获取该图片的元素体 4 placeholder.setAttribute("src",source); // 将第一步获取的值放入 第二部元素体的属性‘src’中 5 }
gallery.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 5 <title>Image Gallery</title> 6 <script type="text/javascript" src="scripts/showPic.js"></script> 7 </head> 8 <body> 9 <h1>Snapshots</h1> 10 <ul> 11 <li> 12 <a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this); return false;">Fireworks</a> 13 </li> 14 <li> 15 <a href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this); return false;">Coffee</a> 16 </li> 17 <li> 18 <a href="images/rose.jpg" title="A red, red rose" onclick="showPic(this); return false;">Rose</a> 19 </li> 20 <li> 21 <a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this); return false;">Big Ben</a> 22 </li> 23 </ul> 24 <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> 25 </body> 26 </html>
