用javascript给指定区域内的图片加上链接，实现A标签的效果_JavaScript

用javascript给指定区域内的图片加上链接，实现A标签的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>用javascript给指定区域内的图片加上链接，实现A标签的效果</title>
<script type="text/javascript" src="http://ajax.useso.com/ajax/libs/jquery/1.4/jquery.min.js"></script><!--此处直接调用Google，也可自行下载到本地-->
<script src="jquery-1.7.2.js" language="javascript"></script>
</head>

<body>
<!--/*

很多时候，我们要给没有超链接的图片加上链接，要怎么做呢？

用jQuery给指定区域内的图片加上链接，实现A标签的效果

不多说了直接贴源码出来

*/-->

<div id="imglists">

<img src="http://images.75271.com/uploads/allimg/120705/1-120F51A5102J.jpg" width=164 />

<img src=http://images.75271.com/uploads/allimg/120705/1-120F51A5102J.jpg width=164 />

</div>

<script language="javascript">
document.body.onload=function loadimg(){
  var images=$('#imglists>img');
  var link = null;         
  var imgLen=images.length;
  for(var i=0;i<imgLen;i++){

//判断图片是否有链接
 if (images[i].parentNode.tagName.toLowerCase() != 'a'){
    images[i].style.cursor="pointer"; 
    link = document.createElement("a");
 link.href = images[i].src;
 images[i].alt='点击查看图片';
 link.setAttribute("rel","sexylightbox[gp]");//此处本来就想实现lightbox组合效果的，不知是lightbox不支持js后期加上去的链接还是什么原因，看不到效果
 link.target="_blank";
 images[i].parentNode.insertBefore(link, images[i]).appendChild(images[i])
}}
}
</script>
</body>
</html>

您必须 登录 才能发表评论！

您必须登录才能发表评论！