<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>image gallery</title>
</head>
<body>
<!--photo gallery-->
<h1>snap shots</h1>
<ul id="imageGallery">
<li><a href="image/fw.gif" title="a fireworks display" onclick="showpic(this); return false">fireworks</a></li>
<li><a href="image/coffee.jpg" title="a cup of black coffee" onclick="showpic(this); return false">coffee</a></li>
<li><a href="image/rose.jpg" title="a red,red rose" onclick="showpic(this); return false">rose</a></li>
<li><a href="image/bigben.jpg" title="the famous clock" onclick="showpic(this); return false">big ben</a></li>
<img id="placeholder" src="image/holder.png" alt="holder place">
</ul>
<!--以上的onclick事件是通过this对象（this即这个对象）returnfalse是为了返回一个相反的函数，使浏览器不执行默认click行为--> <p id="description">choose an image</p> <!--下面的javascript：是通过调用javascript伪协议来实现打开一个新的窗口。注意：qq浏览器不支持该协议-->
<a href="javascript:popUp('http://www.easytec.tk/')">my tec</a>
<a href="#" onclick="popUp('http://www.easytec.tk'); return false">my tec 2</a> <a href="#" onclick="popUp(this.getAttribute('href'));return false;">my tec3</a> <a href="#" onclick="popUp(this.href)">my tec4</a>
<!--showpic函数包括whichpic参数，首先定义变量source，获得所有a元素的href属性，再获得img的placeholder id ，从而设置新的src 属性，即点击时跳转到图片位，继而在li标签中执行show函数-->
<script src="js/js04.js"></script>
</body>
</html>
html部分、
/** * Created by Administrator on 2016/5/25 0025. */
function showpic(whichpic) {
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder'); placeholder.setAttribute('src',source);
var text = whichpic.getAttribute('title');
var description = document.getElementById('description'); description.firstChild.nodeValue = text;
}
//下面的countBodyChildren元素计算的是body元素下有多少个子元素，使用的是notetype下的元素值即 1 。
function countBodyChildren() {
var body_element = document.getElementsByTagName('body')[0]; alert(body_element.nodeType);}window.onload = countBodyChildren();
//打开一个新窗口函数
function popUp(winURL) { window.open(winURL,'popup','width=300px,height=400px');
}
function prepareGallery() {
if(!document.getElementsByTagName)return false; if(!document.getElementById)return false; if(!document.getElementById('imageGallery'))return false;
var gallery = document.getElementById('imageGallery'); gallery.getElementsByTagName('a');
var links = gallery.getElementsByTagName('a');
for(var i = 0; i<links.length ;i++){
links[i].onclick = function () {
showpic(this);
return false;
}
}
}
window.onload = prepareGallery();
js部分
网友评论