圖片庫
期望：
- 當點擊小圖時，能留在這個頁面而不是轉到另一個窗口；
- 當點擊小圖時，能夠在本頁面的下面大圖顯示；
- 當點擊小圖時，在大圖的下面能夠顯示圖片的相關信息。
最終實現效果：
---------------------------------------------------------------------------------------------------------------------------------------------------------
代碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>圖片庫</title>
<link rel="stylesheet" type="text/css" href="./../styles/showPic.css">
</head>
<body>
<h1>圖片庫</h1>
<ul id="imageallery">
<li>
<a href="./../images/11.jpg" οnclick="showPic(this); return false;" title="狗狗">狗狗</a>
</li>
<li>
<a href="./../images/22.jpg" οnclick="showPic(this); return false;" title="花朵">花朵</a>
</li>
<li>
<a href="./../images/a.jpg" οnclick="showPic(this); return false;" title="手套">手套</a>
</li>
<li>
<a href="./../images/border.png" οnclick="showPic(this); return false;" title="邊框">邊框</a>
</li>
</ul>
<img id="placeholder" src="./../images/b.jpg" alt="my image">
<p id="description">chooese an image</p>
<script src="./../javascripts/showPic.js"></script>
</body>
</html>
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById('imageallery')) return false;
var gallery = document.getElementById('imageallery');
var links = gallery.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
return !showPic(this);
}
};
}
function showPic(whichpic) {
if (!document.getElementById('placeholder')) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById('placeholder');
// 檢查placeholder元素是否存在
if (placeholder.nodeName != "IMG") return false;
placeholder.setAttribute("src", source);
if (document.getElementById('description')) {
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
}
return false;
}
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;
}
#placeholder{
width: 300px;
height: 300px;
}