改进:
1、当点击某个链接时,我希望能留在这个网页而不是转到另一个窗口.
2、当点击某个链接时,我希望能留在这个网页上同时看到那张图片以及原有的图片清单。
3、当某个图片显示,相应的描述性文本也同时显示。
4、利用css让网页变得更美观。
一、第1、2步改进由
onclick ="showPic(this); return false;
二、第3步改进由
三、showPic()完整代码:
四、第4步改进由
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
而layout.css完整代码:
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 >
"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);
}
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;
}
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;
}
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;
}
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;
}