HTML图片切换教程-优快云博客

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9     <!--<a href="javacript:;">切换</a>-->
10     <!--<a href="#">切换</a>-->
11     <a href="http://www.baidu.com" style="margin:10px;display: block" οnclick="fn();return false;">切换</a>
12     <img id="img" src="image/1.jpg" width="400px"/>
13 
14     <script>
15         //需求：点击a链接，img图片切换（行内式）
16         //步骤：
17         //1.获取事件源和图片
18         //2.绑定事件
19         //3.书写事件驱动程序
20 
21         //1.获取事件源和图片
22 //        var a = document.getElementsByTagName("a")[0];
23 //        var img = document.getElementById("img");
24 //        //2.绑定事件
25 //        a.onclick = function () {
26 //            //3.书写事件驱动程序
27 //            img.src = "image/2.jpg";
28 //            //return false的目的是禁止a连接跳转；
29 //            return false;
30 //        }
31         var img = document.getElementById("img");
32         function fn(){
33             img.src = "image/2.jpg";
34         }
35 
36 
37     </script>
38 
39 
40 </body>
41 </html>