html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>image Gallery</title> <link rel="stylesheet" href="css/layout.css" media="screen"> </head> <body> <h1>Snapshots</h1> <ul> <li><a href="images/a.jpg" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. " onclick="showPic(this);return false;">test1</a></li> <li><a href="images/b.jpg" title="Autem repellendus itaquequi explicabo recusandae." onclick="showPic(this);return false;">test2</a></li> <li><a href="images/c.jpg" title=" Quae commodi dolores numquam maxime. Alias, soluta!" onclick="showPic(this);return false;">test3</a></li> <li><a href="images/d.jpg" title="facere repudiandae, provident inventore." onclick="showPic(this);return false;">test4</a></li> </ul> <img id="placeholder" src="images/e.jpg" alt="my image gallery"> <p id="description">choose an image.</p> <script type="text/javascript" src="javascript/showPic.js"></script> </body> </html>
---------------------------------------------------------------
css:
body{
300px;
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;
}
image{
display: block;
clear: both;
}
---------------------------------------------------------------
javascript:
function showPic(whichpic){
//获得被点击节点的href属性
var source=whichpic.getAttribute("href");
//获得占位节点 placeholder
var placeholder=document.getElementById("placeholder");
//设置 placeholder scr=source
placeholder.setAttribute("src",source);
var text=whichpic.getAttribute("title");
var description=document.getElementById("description");
description.firstChild.nodeValue=text;
}
//获取被点击节点的title属性
/*var text=whichpic.getAttribute("title");
alert(text);*/
//获取描述的节点description
/*var description=whichpic.getElementById("description");
description.firstChild.nodeValue=text;*/
------------------------------------------
主要是通过getAttribute和setAttribute改变属性改变图片
在页面通过onclick创建点击事件调用函数showPic(this)，this指当前的节点a
函数showPic(whichpic)的whichpic参数通过this传入
<img id="placeholder" src="images/e.jpg" alt="my image gallery">
是占位图片
<p id="description">choose an image.</p>
是对占位图片的描述
根据var text=whichpic.getAttribute("title");获得每张图片的描述
description.firstChild.nodeValue=text;
将每张图片的描述的值赋值给占位图片的描述