03/9
2015
这个给图片加链接的功能，主要是实现点击图片时图片在新标签页打开的功能。这对于显示得比真实尺寸小的图片尤其有用。本站没有这个功能，现在自己写了出来。
<script type="text/javascript">
window.onload=function () {
var allImage=new Array();
allImage=document.getElementsByTagName("img");//获取页面的所有img标签
for (var i = allImage.length - 1; i >= 0; i--) {
var imgUrl=allImage[i].getAttribute("src");//获得当前图片的网址
allImage[i].addEventListener('click', function (event) {
window.open(imgUrl); //给当前图片绑定click事件，在新标签页打开图片
}, false);
}
};
</script>
使用addEventListener给图片添加一个绑定事件，点击图片时会在新标签页中打开图片的URL。
第二种方法：
<script type="text/javascript">
window.onload=function () {
var allImage=new Array();
allImage=document.getElementsByTagName("img");//获取页面的所有img标签
for (var i = allImage.length - 1; i >= 0; i--) {
var imgUrl=allImage[i].getAttribute("src");//获得当前图片的网址
allImage[i].outerHTML="<a href="+imgUrl+" target=_blank>"+allImage[i].outerHTML+"</a>";//在当前img标签外加上a标签
};
}
</script>
只在最后一步和第一种方法不同：这种方法是在img标签外套了一个超链接。出于文档结构和样式的考虑，不推荐此做法。
当我在本站上实际使用时，也是用的绑定事件的方法。但在实际使用中，由于我只想用在文章里的图片，所以需要找到文章区域。而文章区域又不止一个，所以需要双重循环：
<script type="text/javascript">
window.onload=function () {
var allPost=new Array();
allPost=document.getElementsByClassName("post_t");
for (var i = allPost.length - 1; i >= 0; i--) {
var allImage=new Array();
allImage=allPost[i].getElementsByTagName("img");//获取文章区域的所有img标签
for (var ii = allImage.length - 1; ii >= 0; ii--) {
allImage[ii].addEventListener('click', function (event) {
imgUrl=this.getAttribute("src");//获得当前图片的网址
//重要：循环里添加事件的时候，需用this，不能用allImage[ii]，否则添加的事件里的url只会是所有数组中最后一张图片的url
window.open(imgUrl); //给当前图片绑定click事件，在新标签页打开图片
}, false);
}
};
};
</script>
一开始的时候，遇到了问题：所有图片打开时都是数组中最后一张图片。最后确定问题出现在绑定事件的时候：在绑定事件之前时，获取的url都是对应每张图片的Url，但是执行绑定的时候，只能获取到最后一个url。百度之下，把当前图片对象从数组方式改成了用this，问题解决了。参考之处见此 《javascript this详解》这里的第二个例子提到了原因
