标签：
首先先建立一个html文件，建立一个图片库
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>学习日记</title> </head> <body> <h1>hello picture</h1> <ul> <li> <a href="images/guitar.jpg" title="one guitar">guitar</a> </li> <li> <a href="images/back.jpg" title="boy‘back">back</a> </li> <li> <a href="images/hair.jpg" title="girl‘hair">hair</a> </li> <li> <a href="images/beautiful.jpg" title="a beautiful girl">beautiful</a> </li> </ul> <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> </body> </html>
然后写一个函数，用来更换图片，查看图片时，浏览器默认的默认查看行为是在一个新的窗口打开这张图片，而我们的目的是在一个页面实现对图片的更换，所以我们要取消这种默认行为。
代码更改如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>学习日记</title> </head> <body> <h1>hello picture</h1> <ul> <li> <a href="images/guitar.jpg" title="one guitar" onclick="showpic(this);return false">guitar</a> </li> <li> <a href="images/back.jpg" title="boy‘back" onclick="showpic(this);return false">back</a> </li> <li> <a href="images/hair.jpg" title="girl‘hair" onclick="showpic(this);return false">hair</a> </li> <li> <a href="images/beautiful.jpg" title="a beautiful girl" onclick="showpic(this);return false">beautiful</a> </li> </ul> <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> <script> function showpic(whichpic){ var source=whichpic.getAttribute("href"); var placeholder=document.getElementById("placeholder"); placeholder.setAttribute("src",source); } </script> </body> </html>
这样即实现了查看图片在同一个页面。
界限来介绍几种常用的属性
1.nodeValue属性：它用来得到或者设置一个节点的值
2.childNodes属性：用来获取一个元素的所有子元素
3.nodeType属性：
元素节点的nodeType属性值是1
属性节点的nodeType属性值是2
文本节点的nodeType属性值是3
4.firstChild属性：相当于childNodes[0]
5.lastChild属性：相当于childNodes[chlidNodes.length-1]
接下来我们运用以上属性来获取图片的描述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>学习日记</title> <style type="text/css"> body{ font-family:"Helvetica","Arial",serif; color:#333; background-color:#ccc; margin:1em 10%; } h1{ color:#333; background-color:transparent; } a{ color:#c60; background-color:transparent; font-weight:bold; text-decoration:none; } ul{ padding:0; } li{ float:left; padding:1em; list-style:none; } img{ display:block; clear:both; } </style> </head> <body> <h1>hello picture</h1> <ul> <li> <a href="images/guitar.jpg" title="one guitar" onclick="showpic(this);return false">guitar</a> </li> <li> <a href="images/back.jpg" title="boy‘back" onclick="showpic(this);return false">back</a> </li> <li> <a href="images/hair.jpg" title="girl‘hair" onclick="showpic(this);return false">hair</a> </li> <li> <a href="images/beautiful.jpg" title="a beautiful girl" onclick="showpic(this);return false">beautiful</a> </li> </ul> <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> <p id="discription">选择一张图片</p> <script> function showpic(whichpic){ var source=whichpic.getAttribute("href"); var placeholder=document.getElementById("placeholder"); placeholder.setAttribute("src",source); var text=whichpic.getAttribute("title"); var discription=document.getElementById("discription"); discription.firstChild.nodeValue=text; } </script> </body> </html>
为其添加样式，并获取到了图片的详细信息。图片的详细信息就是li元素的title属性，p元素的
firstChild值为“选择一张图片”，是一个文本节点。
标签：
原文地址：http://www.cnblogs.com/wr314/p/5324355.html
