JavaScript 美术馆（改进1）

改进：
1、当点击某个链接时，我希望能留在这个网页而不是转到另一个窗口.
2、当点击某个链接时，我希望能留在这个网页上同时看到那张图片以及原有的图片清单。
3、当某个图片显示，相应的描述性文本也同时显示。
4、利用css让网页变得更美观。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"  xml:lang ="en" >
< head >
   < meta  http-equiv ="content-type"  content ="text/html; charset=utf-8"   />
   < title > Image Gallery </ title >
   <script type="text/javascript" src="scripts/showPic.js"></script>
   <link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</ head >
< body >
   < h1 > Snapshots </ h1 >

   < ul >
     < li >
       < a  href ="images/fireworks.jpg"  title ="A fireworks display"  onclick ="showPic(this); return false;" > Fireworks </ a >
     </ li >
     < li >
       < a  href ="images/coffee.jpg"  title ="A cup of black coffee"  onclick ="showPic(this); return false;" > Coffee </ a >
     </ li >
     < li >

       < a  href ="images/rose.jpg"  title ="A red, red rose"  onclick ="showPic(this); return false;" > Rose </ a >
     </ li >
     < li >
       < a  href ="images/bigben.jpg"  title ="The famous clock"  onclick ="showPic(this); return false;" > Big Ben </ a >
     </ li >
   </ ul >
   < img  id ="placeholder"  src ="images/placeholder.gif"  alt ="my image gallery"   />
   < p  id ="description" > Choose an image. </ p >

</ body >
</ html >

一、第1、2步改进由
onclick ="showPic(this); return false;

function  showPic(whichpic)  ... {
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
}

二、第3步改进由

function  showPic(whichpic)  ... {
  var text = whichpic.getAttribute("title");
  var description = document.getElementById("description");
  description.firstChild.nodeValue = text;
}

三、showPic()完整代码：

function  showPic(whichpic)  ... {
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  var text = whichpic.getAttribute("title");
  var description = document.getElementById("description");
  description.firstChild.nodeValue = text;
}

四、第4步改进由
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
而layout.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;
}