1.介绍
这一章,我们将尝试用JavaScript和DOM建立一个图片库。把整个图片库的浏览器链接集中安排在图片库主页里,只有用户点击了该主页的某个图片的链接才把相应的图片传给他。
2.标记
第一项工作:为这些图片创建一个链接清单。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
</head>
<body>
<h1>SnapChats</h1>
<ul>
<li>
<a href="file:///E|/JavaScript第四章/images/JavaScript3_1.jpg" title="JavaScript第三章图片1">Picture 1</a>
</li>
<li>
<a href="file:///E|/JavaScript第四章/images/JavaScript3_2.jpg" title="JavaScript第三章图片2">Picture 2</a>
</li>
<li>
<a href="file:///E|/JavaScript第四章/images/JavaScript3_3.jpg" title="JavaScript第三章图片3">Picture 3</a>
</li>
<li>
<a href="file:///E|/JavaScript第四章/images/JavaScript3_4.jpg" title="JavaScript第三章图片1">Picture 4</a>
</li>
<li>
<a href="file:///E|/JavaScript第四章/images/JavaScript3_5.jpg" title="JavaScript第三章图片1">Picture 5</a>
</li>
<li>
<a href="file:///E|/JavaScript第四章/images/JavaScript3_6.jpg" title="JavaScript第三章图片1">Picture 6</a>
</li>
</ul>
</body>
</html>
希望改进的几个地方及改进方法:
当点击某个链接,希望能留在这个网页。
解决方法:在点击某个链接,拦截这个网页的行为
当点击某个链接,希望能在这个网页同时看到那张图片和原有的图片清单
解决方法:通过增加“占位符”图片在主页为图片预留一个浏览区域,点击某个 图片链接时 ,把“占位符”图片替换为那个链接相对应的图片。
<!--解决占位符图片的问题-->
<!--把下面这些代码插入到图片清单的末尾-->
<img id="placeholder" src="file:///E|/JavaScript第四章/images/01.jpg" alt="my image gallery"/>