简单的js遍历所有图片 并给图片加上链接 - 夏目友人帐

简单的js遍历所有图片 并给图片加上链接

"夏目贵志" 发表于: 2018年07月29日

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>站长地带www.zzarea.com</title>
<script language="javascript">
function linkForImg(){
  var images=document.getElementsByTagName("img");
  var imgLen=images.length;
  for(var i=0;i<imgLen;i++){
    images[i].onclick=function(){window.open(this.src,"n","width=500,height=600")}
    images[i].title="点击查看大图"
    images[i].style.cursor="pointer";
  }
}
</script>
</head>
<body onLoad="linkForImg()">
<img src="http://bbs.zzarea.com/2005/sdo/760.gif">
<img src="http://www.zzarea.com/img/common/logo.gif">
<img src="http://bbs.zzarea.com/2005/chinaok/ad02-2.gif">
<img src="http://bbs.zzarea.com/2005/alipay/208x32.gif">
</body>
</html>

附:jquery中如何把一大堆图片通过遍历放到数组中的方法

var img_urls = [];
$("img").each(function() {
    img_urls.push($(this).attr("src"));
});
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>站长地带www.zzarea.com</title>
<script language="javascript">
function linkForImg(){
  var images=document.getElementsByTagName("img");
  var imgLen=images.length;
  for(var i=0;i<imgLen;i++){
    images[i].onclick=function(){window.open(this.src,"n","width=500,height=600")}
    images[i].title="点击查看大图"
    images[i].style.cursor="pointer";
  }
}
</script>
</head>
<body onLoad="linkForImg()">
<img src="http://bbs.zzarea.com/2005/sdo/760.gif">
<img src="http://www.zzarea.com/img/common/logo.gif">
<img src="http://bbs.zzarea.com/2005/chinaok/ad02-2.gif">
<img src="http://bbs.zzarea.com/2005/alipay/208x32.gif">
</body>
</html>

附:jquery中如何把一大堆图片通过遍历放到数组中的方法

var img_urls = [];
$("img").each(function() {
    img_urls.push($(this).attr("src"));
});

文章作者:站长地带

原文链接:http://www.zzarea.com/javascript/136.html

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

添加新评论

仅有一条评论

  1. 学到新知识