【前端积累】点击切换图片和文字
原创
©著作权归作者所有:来自51CTO博客作者slp51的原创作品,请联系作者获取转载授权,否则将追究法律责任
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 <script type="text/javascript">
11 //window.onload = countBodyChildren;
12 </script>
13 <link rel="stylesheet" href="css/image.css" type="text/css" media="screen"/>
14 </head>
15 <body>
16 <!--nodeType属性总共有12种属性值,其中3种具有实用价值:元素节点、属性节点、文本节点 分别是 1 2 3-->
17
18 <h1>Snapshots</h1>
19 <ul>
20 <li>
21 <a href="image/fudan.jpg" title="fudan university" onclick="showPic(this); return false;">fudan</a>
22 </li>
23 <li>
24 <a href="image/sunflower.jpg" title="sunflower" onclick="showPic(this);return false;">sunflower</a>
25 </li>
26 <li> <a href="image/waitan.jpg" title="waitan" onclick="showPic(this);return false;">waitan</a>
27 </li>
28 <li>
29 <a href="image/lijiang.jpg" title="lijiang" onclick="showPic(this);return false;">lijiang</a>
30 </li>
31 </ul>
32 <img id="placeholder" src="image/jiuzhaigou.jpeg" alt="my image gallery"/>
33 <p id="description">Choose an image.</p>
34 </body>
35 </html>
1 body {
2 font-family: "Helvetica","Arial",sans-serif;
3 color: #333;
4 background-color: #ccc;
5 margin: 1em 10%;
6 }
7 h1 {
8 color: #333;
9 background-color: transparent;
10 }
11 a {
12 color: #c60;
13 background-color: transparent;
14 font-weight: bold;
15 text-decoration: none;
16 }
17 ul {
18 padding: 0;
19 }
20 li {
21 float: left;
22 padding: 1em;
23 list-style: none;
24 }
1 function showPic(whichpic) {
2 var source = whichpic.getAttribute("href");
3 var placeholder = document.getElementById("placeholder");
4 placeholder.setAttribute("src", source);
5 var text = whichpic.getAttribute("title");
6 var description = document.getElementById("description");
7 //alert(description.firstChild.nodeValue);
8 description.firstChild.nodeValue = text;
9 }
10
11 function countBodyChildren(){
12 var body_element = document.getElementsByTagName("body")[0];
13 alert(body_element.childNodes.length);
14 alert(body_element.nodeType);
15 }
上一篇: Moqui学习Day1
下一篇: 【前端积累】点击链接切换图片显示