【前端积累】点击链接切换图片显示
2016-10-15 18:21
483 查看
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 }
![](https://images2015.cnblogs.com/blog/775114/201610/775114-20161015181952578-76710157.png)
![](https://images2015.cnblogs.com/blog/775114/201610/775114-20161015182039421-1290947363.png)
相关文章推荐
- 【前端积累】点击切换显示内容
- 【前端积累】点击切换图片和文字
- 如何让点击超链接显示图片变成下载链接?
- modalDialog的使用,图片切换,点击图片时打开一个窗体,并显示信息
- 点击图片,切换图片的显示,设置tag图片标志
- Jquery实现点击切换图片并隐藏显示内容
- 原生JS实现隐藏显示图片 JS实现点击切换图片效果
- Android点击Button切换多个图片显示
- unity_NGUI_实现点击鼠标左键切换给定图集中的图片显示
- 点击图片链接不显示虚线边框
- jquery小图片左右滚动点击小图切换显示大图
- jQuery——1、图片动画效果+2、点击切换div显示其内容
- AndEngine Button(2)——点击切换显示图片Button
- 新手学习之点击gridview切换图片,以及图片的显示和隐藏
- 前端点击图片将跳出显示框显示图片
- Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
- 点击图片,切换图片的显示,设置tag
- 一张图片多个链接,点击之后框框显示如何去掉
- 上传图片后不显示,但是点击图片链接进去是能看到图片的
- jquery 图片左右切换,一长条的显示,点击左右移动。