码迷,mamicode.com
首页 > 其他好文 > 详细

【前端积累】点击链接切换图片显示

时间:2016-10-15 19:58:06      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:

 1 <!DOCTYPE html>
 2 <html><!--树根-->
 3     
 4     <head>
 5         <meta charset="utf-8">
 6         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7         <title>Image Gallery</title>
 8         <meta name="description" content="An interactive getting started guide for Brackets.">
 9         <script type="text/javascript" src="showpic.js"></script>
10     </head>
11     <body>
12      <h1>Snapshots</h1>
13         <ul>
14             <li>
15            <a href="image/fudan.jpg" title="fudan university" onclick="showPic(this); return false;">fudan</a>
16            </li>
17             <li>
18             <a href="image/sunflower.jpg" title="sunflower" onclick="showPic(this);return false;">sunflower</a>
19             </li>
20             <li> <a href="image/waitan.jpg" title="waitan" onclick="showPic(this);return false;">waitan</a>
21             </li>
22             <li>
23             <a href="image/lijiang.jpg" title="lijiang" onclick="showPic(this);return false;">lijiang</a>
24             </li>
25         </ul>
26        <img id="placeholder" src="image/jiuzhaigou.jpeg" alt="my image gallery"/>
27      
28     </body>
29 </html>
1 function showPic(whichpic) {
2     var source = whichpic.getAttribute("href");
3     var placeholder = document.getElementById("placeholder");
4     placeholder.setAttribute("src", source);           
5 }

技术分享

技术分享

【前端积累】点击链接切换图片显示

标签:

原文地址:http://www.cnblogs.com/dream-to-pku/p/5965027.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!