基于Javascript的简单图片管理

（一）标记

今天我要做一个小图片浏览的网页。第一项工作室为这些图片创建一个链接清单。因为我没打算让这些图片按照特定顺序排列，所以将使用一个无序清单元素（ul）
下面是我的清单标记

<h1>这是一个图片管理库</h1>
    <ul>
        <li>
            <a href="img/103760-106.jpg" title="图片的简介1" >图片1</a>
        </li>
        <li>
            <a href="img/247336-106.jpg" title="图片的简介2" >图片2</a>
        </li>
        <li>
            <a href="img/248906-106.jpg" title="图片的简介3" >图片3</a>
        </li>
        <li>
            <a href="img/248910-106.jpg" title="图片的简介4" >图片4</a>
        </li>
    </ul>

这是一个相当令人满意的网页，但是它的默认行为还不太理想。下面是我希望改进的几个地方。
1.当点击某个链接时，我希望能留在这个页面而不是转到另一个页面
2.当点击某个链接时，我希望能在这个网页上同时看到那张图片以及原有的图片清单！
那么我们需要做什么呢？首先要拦截这个网页的默认行为，其次在浏览器上为图片预留一个浏览区域，所以我们要解决图片“占位符”的问题！

<img src="img/103760-106.jpg" id="placeholder" alt="图片1">

我对这个图片进行了id属性设置，下面是我网页的样式！
（二）javascript的工作

首先需要给函数起一个好名字！它应该能描述这个函数的用途，还要简明扼要。我决定把这个函数命名为showPic（在这里要注意哦！一般来说我们在创建函数时候对函数进行驼峰式命名也就是字母存在大小写，而对于变量的命名我们则采用下划线_
例如：show_pic。
这样可以让我们一眼看出到底哪些是变量哪些