<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>查看图片</title>
<style type="text/css">
ul,li{ list-style:none;}
ul li{ line-height:24px; float:left; padding:1em;}
img{ display:block; clear:both;}
</style>
</head>
<body>
<h1>Snapshots</h1>
<ul id='imagegallery'>
<li><a href="images/1.jpg" title="pic01111">第一张图片</a></li>
<li><a href="images/2.jpg" title="pic02222">第二张图片</a></li>
<li><a href="images/3.jpg" title="pic03333">第三张图片</a></li>
<li><a href="images/4.jpg" title="pic04444">第四张图片</a></li>
</ul>
<script> //此函数写到外部文件里。
addLoadEvent(prepareGallery);
addLoadEvent(preparePlaceholder);
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload !='function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
function prepareGallery(){
if(!document.getElementById ) return false;
if(!document.getElementsByTagName) return false;
if(!document.getElementById('imagegallery')) return false;
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) ? false : true;
}
// links[i].onkeypress=links[i].onclick;
}
}
function preparePlaceholder(){
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById('imagegallery')) return false;
var gallery=document.getElementById('imagegallery');
var placeholder=document.createElement('img');
placeholder.id='placeholder';
placeholder.alt='My Image Gallery';
placeholder.src='images/placeholder.gif';
var description=document.createElement('p');
description.setAttribute('id','description');
var desctxt=document.createTextNode('Choose an image');
description.appendChild(desctxt);
//gallery.parentNode.insertBefore(placeholder,gallery);
//gallery.parentNode.insertBefore(description,gallery);
insertAfter(placeholder,gallery);
insertAfter(description,placeholder);
}
function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if( parent.lastChild == targetElement ){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.sibling);
}
}
function showpic(whichpic){
if( !document.getElementById('placeholder')) return false;
var placeholder=document.getElementById('placeholder');
if(placeholder.nodeName!='IMG') return false; //*******nodeName属性总是返回一个大写字母的值,即使元素在HTML文档里是小写字母。
placeholder.setAttribute('src',whichpic.getAttribute('href'));
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;
}
</script>
</body>
</html>