zoukankan      html  css  js  c++  java
  • 【前端积累】点击链接切换图片显示

     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 }

  • 相关阅读:
    MSN无法登录(错误代码80072745)的解决方法
    C#3.0新体验(二) 扩展方法
    My DreamTech
    让IE崩溃的bug, IE8也一样崩溃
    多线程的相关概念
    10条PHP经验总结
    PHP框架 CI与TP之MVC比较
    多线程设计要点
    Linux yum命令的使用技巧
    BigPipe 的工作原理
  • 原文地址:https://www.cnblogs.com/dream-to-pku/p/5965027.html
Copyright © 2011-2022 走看看