圖片庫程序（有誤）
images gallery.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<link rel="stylesheet" href="styles/layout.css" media="screen"/>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="images/1.jpg" title="katong">katong</a>
</li>
<li>
<a href="images/2.jpg" title="off">off</a>
</li>
<li>
<a href="images/3.jpg" title="a man">a man</a>
</li>
<li>
<a href="images/4.jpg" title="sun">sun </a>
</li>
<li>
<a href="images/5.jpg" title="two head">two head</a>
</li>
</ul>
<script type="text/javascript" src="scripts/showPic.js"></script>
</body>
layout.css
@charset "utf-8";
/* CSS Document */
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;
}
#imagegallery{
list-style:none;
}
#imagegallery{
display:inline;
}
showPic.js
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.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)return false;
if(!document.createTextNode)return false;
if(!document.getElementById)return false;
if(!document.getElementById("imagegallery"))return false;
var placeholder=document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","images/6.jpg");
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 countBodyChildren(){
var body_element=document.getElementsByTagName("body")[0];
alert(body_element.nodeType);
}
window.onload=countBodyChildren;*/
function prepareGallery(){
if(!document.getElementsByTagName)return false;
if(!document.getElementById)return false;
if(!document.getElementById("imagegallery"))return false; //檢查瀏覽器是否理解getElementByTagName和ById；是否存在id為imagegallery元素
var gallery=document.getElementById("imagegallery"); //遍歷imagegallery元素中所有鏈接
var links=document.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
link[i].onclick=function(){ //設置onclick事件，在有關鏈接被點擊時完成操作
return showPic(this)?false:true; /*把這個鏈接作為參數(shù)傳遞給showPic函數(shù); 如placeholder 圖片不存在，瀏覽器按用戶所點擊的鏈接打開一張新圖片*/
}
}
}
function showPic(whichpic){
if(!document.getElementById("placeholder"))return false; //d為placeholder是否存在
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
//if(placeholder.nodeName!="IMG")return false; //假設是一張圖片，placeholder是否存在
placeholder.setAttribute("src",source);
if(document.getElementById("description")){
var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):""; //id為description是否存在（可被忽略）
//title不存在設值為空字符串
var description=document.getElementById("description");
if(description.firstChild.nodeType==3){ //檢查文本節(jié)點的nodeType屬性值為3
description.firstChild.nodeValue=text;
}
}
return true;
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
頁面效果
