这个案例中将把相关的javascript和css样式都存放在不同的文件，便于管理。
以上代码有一点需要说明，onclick函数中有个return false;这是为了防止页面跳转到另外一个页面。
以下是相应的js代码：
css代码
[img]http://priv.hiphotos.baidu.com/album/s%3D1000%3Bq%3D90/sign=ce51d1eb251f95caa2f596b6f927444f/42166d224f4a20a41f78e85290529822730ed0c5.jpg?psign=12a01a48ab64034f256f7b1fafeab6500a55b319e9c43da8[/img]
大家可看到这个案例的不足之处？有三点：
1、预留退路，2、向后兼容3、分离javascript（在开发中我感觉3有可能比较注重）
改进后的代码在下载包中
<html>
<head>
<script src="scripts/showPic.js" type="text/javascript"></script>
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen"/>
<style>
</style>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li><a href="images/fireworks.jpg" onclick="showPic(this);return false;" title="A fireworks display">Fireworks</a></li>
<li><a href="images/coffee.jpg" onclick="showPic(this); return false;" title="A cup of blcak coffee">Coffee</a></li>
<li><a href="images/rose.jpg" onclick="showPic(this); return false;" title="A red,red rose">Rose</a></li>
<li><a href="images/bigben.jpg" onclick="showPic(this); return false;" title="the famous clock">Big Ben</a></li>
</ul>
<p id="description">Choose an image.</p>
<img id="placehoder" width="500" src="images/bigben.jpg" alt="my image gallery"/>
</body>
</html>
以上代码有一点需要说明，onclick函数中有个return false;这是为了防止页面跳转到另外一个页面。
以下是相应的js代码：
function showPic(whichpic){
var source = whichpic.getAttribute("href");
var placehoder = document.getElementById("placehoder");
placehoder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue=text;
}
function countBodyChildren(){
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.nodeType);
}
css代码
body{
font-family:"Helvetica","Arial",sans-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;
}
[img]http://priv.hiphotos.baidu.com/album/s%3D1000%3Bq%3D90/sign=ce51d1eb251f95caa2f596b6f927444f/42166d224f4a20a41f78e85290529822730ed0c5.jpg?psign=12a01a48ab64034f256f7b1fafeab6500a55b319e9c43da8[/img]
大家可看到这个案例的不足之处？有三点：
1、预留退路，2、向后兼容3、分离javascript（在开发中我感觉3有可能比较注重）
改进后的代码在下载包中
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
