JavaScript图片库
图片发布到网上的办法很多。可以简单的放在同一个网页里，但是如果需要发布的图片比较多，这个页面就会过于庞大。
因此我们可以为每张图片分别建一个网页，但是时间消耗过大，手段繁琐。
使用js来创建图片库：把整个图片库的浏览链接集中安排在图片库的主页里，在点击链接图片后才把相应图片传达。
标记
创建了一个无序列表的html，每个li超链接是一个图片。希望改进：
- 点击链接，留在窗口而不是转到另一个窗口。
- 点击链接，希望看到图片和原有清单。
改进方法：
- 通过增加一个“占位符”图片方法在这个主页上为图片预留一个浏览区域。
- 点击某个链接时，拦截这个网站默认行为。
- 点击某个链接时，把“占位符”图片替换成那个链接相对应的图片。
先来解决“占位符”图片的问题。依据个人喜好来选择，空白图片也可以。然后插入placeholder：
<img id=placeholder src="image/placeholder.jpg" alt="my gallery" />
现在标记文件已经准备好了，接下来是编写js。
JavaScript
思路：把占位符图片改为想查看的图片，要改变占位符图片的src属性。应该使用setAttribute来做改变。所以利用这个方法制作一个函数，这个函数只有一个参数，就是一个图片链接。它通过改变占位符图片的src属性的办法将其替换为参数图片。
函数名字：function showPic(whichpic)
过程：我是逆推方法，我们需要通过setAttribute改变占位符图片的src属性：
____.setAttribute("src",____)
第一个____是占位符图片元素，我们使用getElementById可以获得：
document.getElementById("placeholder")
第二个____是要改变为的图片地址，也就是列表里图片的地址，也就是参数whichpic的地址。所以我们要获取whichpic的href属性，这个可以使用getAttribute来获得属性：
whichpic.getAttribute("href")
所以得出：
document.getElementById("placeholder").setAttribute("src",whichpic.getAttribute("href"));
为了代码的美观和易读性：
var placeholder = document.getElementById("placeholder")
var source = whichpic.getAttribute("href")
最后可简化：
placeholder.setAttribute("src",source);
最终得到的函数：
function showPic(whichpic){
var placeholder = document.getElementById("placeholder");
var source = whichpic.getAttribute("href");
placeholder.setAttribute("src",source);
}
应用这个函数
函数保存js格式在script文件夹里，在</body>之前插入一个引用js的链接：
<script src="script/showPic.js"></script>
这样就可以使用showPic这个函数了。就此打住，showPic函数永远不会被调用。我们需要给图片链接添加行为，也就是事件处理函数。
事件处理函数
在特定事件发生时调用特定的js代码。例如，在鼠标悬停某个元素触发一个动作，使用onmouseover事件处理函数；在鼠标指针离开某个元素的时候触发一个动作，就需要使用onmouseout事件处理函数。
我想在用户点击某个链接时触发一个动作，需要使用onclick事件处理函数。
showPic()函数需要一个参数，这个参数是一个带有href属性的元素节点，当我把onclick事件处理函数嵌入到一个连接中，需要把这个链接本身用作showPic函数的参数。
可以使用this关键字来做到这一点，含义是：“这个对象”。
onclick = "showPic(this);"
但是仅仅把这个放入图片链接中，会遇到一个问题：点击这个链接时，不仅函数showPic会被调用，链接的默认行为也会被调用，我需要阻止图片出现。
事件处理函数的工作机制：我们给一个链接添加onclick事件处理函数，并让这个处理函数所触发的js返回布尔值true或false。这样一来，被点击了，返回true；没被点击，返回false，所以可以增加一条return false的语句，防止用户被带入目标链接窗口：
<li><a href=".jpg" onclick = "showPic(this);return false">benz</a>
函数和return false的顺序不能错
网友评论