<!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>