发表一个javascript美术馆的小案例 -

zhangzhennan

浏览: 9635 次
性别:
来自: 杭州

最近访客更多访客>>

一步一步来

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

发表一个javascript美术馆的小案例

css js src html javascript

这个案例中将把相关的javascript和css样式都存放在不同的文件，便于管理。

     <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;
}