实现效果:点击图片链接,可以在当前网页显示图片,并且显示图片标题。
Html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li><a href="images/fireworks.jpg" onclick="showPic(this);return false" title="A fireworks display"> Fireworks</a></li>
<li><a href="images/coffee.jpg" onclick="showPic(this);return false" title="A cup of black coffee">Coffee</a></li>
<li><a href="images/rose.jpg" onclick="showPic(this);return false" title="A red, red rose">Rose</a></li>
<li><a href="images/bigben.jpg" onclick="showPic(this);return false" title="The famous clock"> Big Ben</a></li>
</ul>
<img id="placeholder" src="data:images/placeholder.gif"alt="my image gallery" />
<p id="description">Choose an image.</p>
</body>
</html>
思路:
1、为每张图片分别创建一个网页,如果都放在一个网页里,数据量大,下载速度会变慢。
2、当点击某个连接时,可以留在这个网页而非转到另一个窗口。并且可以看到原有的图片清单。
3、为了实现第二条效果,需要增加一个“占位符”图片。“占位符”在这个主页上为图片预留一个浏览区域。在点击某个链接时,要拦截其默认行为。在点击某个链接时,把“占位符”图片替换为与那个连接相对应的图片。
js代码:
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;
}
1、 此方法的两个参数:(1)打算对之进行设置的属性(src)。(2)这个属性的新属性值(保存在source中)。
2、 Whichpic代表了一个元素节点。即某个图片的<a>元素。
3、 为什么不用placeholder.src=source(老方法).setAttribute()方法是“第一级DOM”的组成部分之一,这个方法可以对任意元素节点的任意属性进行设置,并且可移植性好,老方法只适用于web文档,DOM适用于任何一种标记语言。(DOM是一种适用于多种环境和多种程序设计语言的通用型API).
4、 对js函数进行功能扩展,使得在点击相应的图片链接时,图片对应的文本也可以改变。同样,设置含有两个参数的函数(1)打算对之进行设置的属性(p的文本节点的内容)。(2)这个属性的新属性值(保存在text中)。用到的属性:childNodes;nodeType;nodeValue;firstChild;lastChild。