87,910
社区成员
发帖
与我相关
我的任务
分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imageGallery">
<li><a href="images/1.jpg">1</a></li>
<li><a href="images/2.jpg">2</a></li>
<li><a href="images/3.jpg">3</a></li>
<li><a href="images/4.jpg">4</a></li>
</ul>
<img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" />
<script>
window.onload = prepareGallery;
function showPic(whichpic){
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
return false;
}
function prepareGallery(){
var gallery = getElementById("imageGallery");
var links = gallery.getElementsByTagName("a");
for (var i=0;i<links.length;i++){
links[i].onclick = function(){
return showPic(this);
}
}
}
</script>
</body>
</html>