<!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;}
</style>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<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>
<img id='placeholder' alt='My Image Gallery' src="images/placeholder.gif"/>
<script>
var liNode=document.getElementsByTagName('li');
var placeholder=document.getElementById('placeholder');
var alink=document.getElementsByTagName('a');
for(var i=0;i<alink.length;i++){
alink[i].onclick=function(event){
event=event || window.event;
if(event.returnValue){
event.returnValue=false;
}else{
event.preventDefault();
}
showpic(this);
}
}
function showpic(whichpic){
placeholder.setAttribute('src',whichpic.getAttribute('href'));
}
</script>
</body>
</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>
<style type="text/css">
ul,li{ list-style:none;}
ul li{ line-height:24px;}
</style>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li><a href="images/1.jpg" title="pic01111" onclick="showpic(this);return false;">第一张图片</a></li>
<li><a href="images/2.jpg" title="pic02222" onclick="showpic(this);return false;">第二张图片</a></li>
<li><a href="images/3.jpg" title="pic03333" onclick="showpic(this);return false;">第三张图片</a></li>
<li><a href="images/4.jpg" title="pic04444" onclick="showpic(this);return false;">第四张图片</a></li>
</ul>
<img id='placeholder' alt='My Image Gallery' src="images/placeholder.gif"/>
<script>
var placeholder=document.getElementById('placeholder');
function showpic(whichpic){
placeholder.setAttribute('src',whichpic.getAttribute('href'));
}
</script>
</body>
</html>
<body>
<h1>Snapshots</h1>
<ul>
<li><a href="images/1.jpg" title="pic01111" onclick="showpic(this);return false;">第一张图片</a></li>
<li><a href="images/2.jpg" title="pic02222" onclick="showpic(this);return false;">第二张图片</a></li>
<li><a href="images/3.jpg" title="pic03333" onclick="showpic(this);return false;">第三张图片</a></li>
<li><a href="images/4.jpg" title="pic04444" onclick="showpic(this);return false;">第四张图片</a></li>
</ul>
<img id='placeholder' alt='My Image Gallery' src="images/placeholder.gif"/>
<p id="description">Choose an image</p>
<script>
var placeholder=document.getElementById('placeholder');
function showpic(whichpic){
var text=whichpic.getAttribute('title');
var description=document.getElementById('description');
description.firstChild.nodeValue=text;
placeholder.setAttribute('src',whichpic.getAttribute('href'));
//alert(description.childNodes[0].nodeValue);
}
//alert(document.getElementsByTagName('body')[0].childNodes.length);
</script>
</body>
浙公网安备 33010602011771号