点击一个链接,在同一个页面显示图片(优美的代码)
html:
<!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>
<script language="javascript" src="scripts/showPic.js" type="text/javascript">
</script>
</head>
<body>
<ul id="imageGallery">
<li><a href="image/car1.jpg" title="第一张图片">第一张图片</a></li>
<li><a href="image/car2.jpg" title="第二张图片">第二张图片</a></li>
<li><a href="image/car3.jpg" title="第三张图片">第三张图片</a></li>
<li><a href="image/car4.jpg" title="第四张图片">第四张图片</a></li>
</ul><br/>
</body>
</html>
showPic.js
//显示图片
function showPic(image){
if(!document.getElementById("change")) return true;
var source=image.getAttribute("href");
var change=document.getElementById("change");
if(change.nodeName.toLowerCase()!="img") return true;
change.setAttribute("src",source);
if(!document.getElementsByName("title")) return true;
var text=image.getAttribute("title")?image.getAttribute("title"):"";
var description=document.getElementById("description");
if(description.firstChild.nodeType==3)
description.firstChild.nodeValue=text;
return false;
}
function prepareGallery(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) 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].οnclick=function(){
return showPic(this);
}
}
}
//生成"ing",''p"
function prepareChange(){
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imageGallery")) return false;
var change=document.createElement("img");
change.setAttribute("id","change");
change.setAttribute("src","image/car1.jpg");
change.setAttribute("alt","the first image");
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(change,gallery);
insertAfter(description,change);
}
function insertAfter(newElement,targetElement){
var parentElement=targetElement.parentNode;
if(parentElement.lastChild==targetElement){
parentElement.appendChild(newElement);
}
else{
parentElement.insertBefore(newElement,targetElement.nextSibling);
}
}
function addLoadEvent(func){
var oldOnLoad=window.onload;
if(typeof window.onload!="function"){
window.οnlοad=func;
}
else{
window.οnlοad=function(){
oldOnLoad();
func();
}
}
}
addLoadEvent(prepareChange);
addLoadEvent(prepareGallery);