美术馆

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>美术馆</title>
 5     <style type="text/css">
 6         .imageSmall
 7         {
 8              112px;
 9             height: 70px;
10         }
11         #img1
12         {
13             margin-left: 200px;
14         }
15     </style>
16     <script type="text/javascript">
17         onload = function () {
18             //获得所有img标签
19             var imageSmall = document.getElementById("img1");
20             //获得div标签
21             var dv = document.getElementById("dv");
22             //小图片点击事件
23             imageSmall.onclick = function () {
24                 if (dv.getElementsByTagName("img")) {
25                 //如果存在图片，就删除，dv的内部清空
26                     dv.innerHTML="";
27                 }
28 
29                 //在div中增加大图片的标签
30                 var imageLarge = document.createElement("img");
31                 dv.appendChild(imageLarge);
32                 imageLarge.src = imageSmall.src;
33                 imageLarge.alt = "大图片";
34             }
35         }
36     </script>
37 </head>
38 <body>
39     <img class="imageSmall" id="img1" src="source/image/01.jpg" />
40     <img class="imageSmall" id="img2" src="source/image/02.jpg" />
41     <img class="imageSmall" id="img3" src="source/image/03.jpg" />
42     <img class="imageSmall" id="img4" src="source/image/04.jpg" />
43     <img class="imageSmall" id="img5" src="source/image/05.jpg" />
44     <div id="dv">
45     </div>
46 </body>
47 </html>