2020.6.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圖片庫</title>
<link rel="stylesheet" href="layout.css">
</head>
<body>
<h2>壁紙</h2>
<ul id="imageGallery">
<li>
<a href="../images/Desert 1.jpg" title="沙漠岩石">
<img src="../images/Desert 1.jpg" alt="沙漠岩石">
</a>
</li>
<li>
<a href="../images/Desert 2.jpg" title="沙漠平地">
<img src="../images/Desert 2.jpg" alt="沙漠平地">
</a>
</li>
<li>
<a href="../images/Desert 3.jpg" title="沙漠倒影">
<img src="../images/Desert 3.jpg" alt="沙漠倒影">
</a>
</li>
<li>
<a href="../images/Desert 4.jpg" title="沙漠岩層">
<img src="../images/Desert 4.jpg" alt="沙漠岩層">
</a>
</li>
<li>
<a href="../images/Desert 5.jpg" title="沙漠沙丘">
<img src="../images/Desert 5.jpg" alt="沙漠沙丘">
</a>
</li>
<li>
<a href="../images/Desert 6.jpg" title="月光下的沙丘">
<img src="../images/Desert 6.jpg" alt="月光下的沙丘">
</a>
</li>
<li>
<a href="../images/Desert 7.jpg" title="夜空下的沙丘">
<img src="../images/Desert 7.jpg" alt="夜空下的沙丘">
</a>
</li>
</ul>
<img id="placeholder" class="image" src="../images/Desert 1.jpg" alt="圖片庫">
<p id="description">選擇圖片</p>
<script src="Picture.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h2 {
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
li {
float: left;
padding: 1em;
list-style: none;
}
img {
height: 50px;
width: 50px;
}
#placeholder {
height: 500px;
width: 800px;
}
function showPic(whichPic){
var source = whichPic.getAttribute("href");
var text = whichPic.getAttribute("title");
var placeholder = document.getElementById("placeholder");
var description = document.getElementById("description");
placeholder.setAttribute("src",source);
description.firstChild.nodeValue = text;
}
function prepareGallery(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imageGallery")) return false;
var gallery = document.getElementById("imageGallery");
var links = gallery.getElementsByTagName("a");
for(i in links){
links[i].onclick = function() {
showPic(this);
return false;
}
}
}
window.onload = function(){
this.prepareGallery();
}