<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="../css/imggallery.css">
<!-- <link rel="stylesheet" type="text/css" href="../css/galleryLayOut.css"> -->
<script src="../js/showPic.js">
</script>
</head>
<body>
<h1>Image Gallery</h1>
<ul id="imagegallery">
<li>
<a href="../images/1.jpeg" title="a handsom boy">kanan</a>
</li>
<li>
<a href="../images/2.jpg"title="a smart fish">fish</a>
</li>
<li>
<a href="../images/3.jpg"title="a smart dog">dog</a>
</li>
<li>
<a href="../images/4.jpg"title="a fine day">glass</a>
</li>
<img src="../images/placehold.jpg" alt="my placehold gallery"/>
<p id="description">Choose an image.</p>
</ul>
</body>
</html>
addLoadEvent(prepareGallery);
window.onload = function prepareGallery() {
if(!document.getElementByTagName)
return false;
if(!document.getElementById)
return false;
if(!document.getElementById("imagegallery"))
return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementByTagName("a");
for(var i = 0;i < links.length; i++){
links[i].onclick = function(){
return showPic(this)?false:true;
}
}
}
function showPic(whichpic) {
if(!document.getElementById("placehold"))
return false;
var source = whichpic.getAttribute("href");
var placehold = document.getElementById("placehold");
if(placehold.nodeName !="IMG")
return false;
placehold.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 true;
}
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function{
oldonload();
func();
}
}
}
//本意是在本页面中看到连接的不同图片,但是这样还是跳转到了另一个窗口去了
//新手,谢谢指导。