注册 登录
  • 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

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

JavaScript 开心洋葱 4020次浏览 已收录 0个评论 手机上查看

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>

 


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明用javascript给指定区域内的图片加上链接,实现A标签的效果
喜欢 (0)
[开心洋葱]
分享 (0)
关于作者:
开心洋葱,开心洋葱头,水墨

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

……
加载中……