Code<!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 runat="server">
<title>无标题页</title>
<script type="text/javascript">
function showPic(whichpic)//参数：目标图像元素，返回是否前往指定链接
{
var source = whichpic.href;//获取前往的链接，相同于 whichpic.getAttribute("href")
var title = whichpic.title;
var placeholder = document.images("placeholder");
//获取“占位符”元素，相同于 document.getElementById("placeholder")
//同样 document.anchors("pp").href 也是相同意义。
placeholder.src = source;//设置“占位符”元素的src属性，相同于 placeholder.setAttribute("src",source)
placeholder.alt = title;
document.getElementById("description").firstChild.nodeValue = whichpic.firstChild.nodeValue;//获取非属性的文本及“开始元素”和“结束元素”之间的文本段。
return false;
}
</script>
<style type="text/css">
body
{
font-family: 幼圆,宋体;
color: #333;
margin: 1em 10%; /*顶边距和底边距为1em，左边距和右边距是父元素宽度的10%：*/
background-color: #ccc;
}
h1
{
}
a
{
color: #c60;
font-weight: bold;
text-decoration: none; /*取消链接的下划线，*/
}
ul
{
padding: 0;
}
li
{
float:left;
padding: 3%;
list-style: none;
}
p
{
text-align:center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>
相片组</h1>
<ul>
<li><a id="pp" href="Images/1.jpg" title="很傻的动作啊！" onclick="return showPic(this);"><img src="Images/1.jpg" alt="很傻的动作啊！" /></a></li>
<li><a href="Images/2.jpg" title="这个更傻！" onclick="return showPic(this);">笨笨的漂亮老婆2</a></li>
<li><a href="Images/3.jpg" title="这个最傻了！" onclick="return showPic(this);">笨笨的漂亮老婆3</a></li>
<li><a href="Images/4.jpg" title="哇哈哈，我亲！" onclick="return showPic(this);">笨笨的漂亮老婆4</a></li>
<li><a href="Images/5.jpg" title="不说，先亲下，再说傻~~" onclick="return showPic(this);">笨笨的漂亮老婆5</a></li>
</ul>
<p>
<img id="placeholder" src="" alt="很猪" style="width: 400px; height: 400px;"/></p>
<p id="description">
请选择一张图片。</p>
</div>
</form>
</body>
</html>
