html代码:
<!DOCTYPE html><htmllang="en"><head><metahttp-equiv="content-type"content="text/html; charset=utf-8" /><title>Image Gallery</title><scripttype="text/javascript"src="scripts/showPic.js"></script><linkrel="stylesheet"href="styles/layout.css"type="text/css"media="screen" /></head><body><h1>Snapshots</h1><ulid="imagegallery"><li><ahref="images/fireworks.jpg"title="A fireworks display"><imgsrc="images/thumbnail_fireworks.jpg"alt="Fireworks" /></a></li><li><ahref="images/coffee.jpg"title="A cup of black coffee" ><imgsrc="images/thumbnail_coffee.jpg"alt="Coffee" /></a></li><li><ahref="images/rose.jpg"title="A red, red rose"><imgsrc="images/thumbnail_rose.jpg"alt="Rose" /></a></li><li><ahref="images/bigben.jpg"title="The famous clock"><imgsrc="images/thumbnail_bigben.jpg"alt="Big Ben" /></a></li></ul></body></html>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeofwindow.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function preparePlaceholder() {
if (!document.createElement) returnfalse;
if (!document.createTextNode) returnfalse;
if (!document.getElementById) returnfalse;
if (!document.getElementById("imagegallery")) returnfalse;
var placeholder = document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","images/placeholder.gif");
placeholder.setAttribute("alt","my image gallery");
var description = document.createElement("p");
description.setAttribute("id","description");
var desctext = document.createTextNode("Choose an image");
description.appendChild(desctext);
var gallery = document.getElementById("imagegallery");
insertAfter(placeholder,gallery);
insertAfter(description,placeholder);
}
function prepareGallery() {
if (!document.getElementsByTagName) returnfalse;
if (!document.getElementById) returnfalse;
if (!document.getElementById("imagegallery")) returnfalse;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
}
links[i].onkeypress = links[i].onclick;
}
}
function showPic(whichpic) {
if (!document.getElementById("placeholder")) returntrue;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) returnfalse;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
returnfalse;
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);