案例研究：JavaScript图片库

来源：互联网发布：读书看报软件编辑：程序博客网时间：2024/05/01 16:42

现在，是时候让DOM去做一些事了，我们用JavaScript和DOM去建立一个图片库。

1、把图片集中保存在images目录里，

2、解决“占位符”图片的问题，我选用了一个类似于名片的图片，你可以根据个人喜好来决定选用的图片。

3、为了把“占位符”图片替换为想要查看的图片，需要改变它的src属性。setAttribute是完成这项工作的最佳选择，而我将利用这个方法写一个函数。这个函数只有一个参数，即一个图片链接。它通过改变“占位符”图片的src属性的办法将其替换为参数图片。

4、应用这个JavaScript函数，函数写完了，接下来就要在图片库文档里使用它，把这个函数保存在扩展名为.js的文本文件中

photo.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Image Gallery</title>
<link rel = "stylesheet" href = "styles/layout.css" media = "screen"/>
</head>
<body>
<h1>Snapshots</h1>
<script type="text/javascript" src="scripts/showPic.js"></script>
<ul>
<li>
<a href="images/keke1.jpg" onclick="showPic(this); return false;"title="A fireworks display">Firewoks</a>
</li>
<li>
<a href="images/keke2.jpg" onclick="showPic(this); return false;"title="A cup of black coffee">Coffee</a>
</li>
<li>
<a href="images/keke3.jpg" onclick="showPic(this); return false;"title="A red,red rose">Rose</a>
</li>
<li>
<a href="images/running.jpg" onclick="showPic(this); return false;"title="The famous clock">Big Ben</a>
</li>

<img id="placeholder" src="images/placeholder.jpg" alt = "my image gallery"/>
<p id="description">Choose an image.</p>
</ul>
</body>
</html>

scripts/showPic.js：

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

styles/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;
}
img{
display: block;
clear: both;
}

0 0