<!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>
转载于:https://www.cnblogs.com/positive/p/3657523.html