现在，是时候利用DOM去完成一些简单的任务了。在这一章中，我将带领大家用JavaScript和DOM去建立一个图片库，并将其称为“JavaScript美术馆”。我们将按照以下步骤来完成这一案例：

  ● 编写一份优秀的标记语言文档。

  ●编写一个JavaScript函数以显示用户想要查看的图片。

  ●在标记语言文档里触发一个调用JavaScript图片显示的函数。

  ●对这个JavaScript函数的功能进行扩展。这需要用到几个新的DOM方法。

把一些图片发布到网上的办法很多。最容易想到的办法是把所有的图片都放到同一个网页里。不过，如果你打算发布的图片比较多的话，这个页面很快就会因为变得过于巨大而失去吸引力。要知道，虽然这种网页本身的HTML代码不会多到哪儿去，但算上那些图片可就不一样了。我们必须面对的现实是：数据量越大，网页的下载时间就越长，但愿意等待很长时间去下载一个网页的人却没有几个。

因此，为每张图片分别创建一个网页的解决方案显然更值得考虑。你的图片库将不再是一个体积庞大、难以下载的网页，而是许多尺寸合理、便于下载和浏览的页面。不过，这一解决方案并非尽善尽美：首先，为每张图片分别制作一个网页需要花费不少的时间和精力；其次，需要在每个网页上提供一些链接，来给出当前图片在整个图片库里的位置以方便人们从当前图片转到其他的图片。

如果你想两全其美，利用JavaScript来创建图片库将是最佳的选择：把整个图片库的浏览链接集中安排在你的图片库主页里，只在用户点击了这个主页里的某个图片链接时才把相应的图片传送给他。

4.1　编写标记语言文档

为了完成“JavaScript美术馆”案例，我特意用数码相机拍摄了几张照片，并把它们修整成最适合于用浏览器来查看的尺寸，即400像素宽×300像素高。

第一项工作是为这些图片创建一个链接清单。因为我没打算让这些图片按照某种特殊的顺序排列，所以将使用一个无序清单元素（<ul>）来列出那些链接。如果想让自己的图片按顺序排列的话，应该使用一个排序清单元素（<ol>）去组织图片链接。

下面就是我编写出来的HTML文档：

我将把这份文档保存为gallery.html文件，并把图片集中保存在子目录images里。我的images子目录和gallery.html文件位于同一个子目录下。在gallery.html文件里，无序清单元素中的每个链接分别指向不同的图片。在浏览器窗口里点击某个链接就可以转到相应的图片，但从图片重新返回到链接清单目前还必须借助于浏览器的Back（后退）按钮。下面是这个基本的链接清单在浏览器窗口里的显示效果。

这是一个相当令人满意的网页，但它的默认行为还不太理想。下面是我觉得还需要改进的几个地方：

  ●当点击某个链接时，我希望能留在这个网页而不是转到另一个窗口。

  ●当点击某个链接时，我希望能在这个网页上同时看到那张图片以及原有的图片清单。

下面是我为了实现上述希望而需要完成的几项改进：

  ●通过增加一个“占位符”图片的办法在这个主页上为图片预留一个浏览区域。

  ●在点击某个链接时，将拦截这个网页的默认行为。

  ●在点击某个链接时，将把“占位符”图片替换为与那个链接相对应的图片。

我们先来解决“占位符”图片的问题。我选用了一个类似于名片的图片，你们可以根据个人喜好来决定选用的图片，即使选用一个空白图片也没问题。

把下面这些代码插入到图片名单的末尾：

我对这个图片的id属性进行了设置，这将使我可以通过一个外部的样式表对图片的显示位置和显示效果加以控制。例如，我可以让这个图片出现在链接清单的旁边而不是它的下方。我还可以在自己的JavaScript代码里使用这个id值。下面是这个页面在增加了“占位符”图片后的显示效果。

现在，我的HTML文档已经准备好了。接下来的工作是编写一些必要的JavaScript代码。