gallery

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传入

是占位图片

<p id="description">choose an image.</p>

是对占位图片的描述

根据var text=whichpic.getAttribute("title");获得每张图片的描述

description.firstChild.nodeValue=text;

将每张图片的描述的值赋值给占位图片的描述