saber酱的抱枕

Fly me to the moon

03/9
16:07
学习

用js给图片加上超链接

这个给图片加链接的功能,主要是实现点击图片时图片在新标签页打开的功能。这对于显示得比真实尺寸小的图片尤其有用。本站没有这个功能,现在自己写了出来。

    <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详解》这里的第二个例子提到了原因

用js给图片加上超链接