JavaScript 实现切换图片并且实现了链接随着图片的改变而改变

最新推荐文章于 2021-08-29 21:50:06 发布

我是文哥

最新推荐文章于 2021-08-29 21:50:06 发布

阅读量726

点赞数

本文链接：https://blog.csdn.net/newcnzz/article/details/8301269

版权

avaScript 实现切换图片并且实现了链接随着图片的改变而改变.

本人是JavaScript菜鸟.希望有好的方法可以留言给我谢谢共同学习
JS代码：

 
  <html>  
   
 <head>  
   
 <title>这个例子 图片不弹出窗口,只在当前页面显示</title>  
   
 </head>  
 <script type="text/javascript">  
 function show(href)   //href代表元素的节点  
 {  
     //获得单击中的href属性  
     var picref=href.getAttribute("href");  
     //获得链接图片的位置  
     var picid=document.getElementById("imgBack");  
     //使用SetAttribute更换链接图片的src  
     picid.setAttribute("src",picref);  
   
     //获得单击中的title值  
     var pictitle=href.getAttribute("title");  
     //替换链接图片的alt值  
     picid.setAttribute("alt",pictitle);  
 }  
 function showqq(qqhref){  
   
    var picid=document.getElementById("imgBackQQ");  
     var pichref=qqhref.getAttribute("href");  
     picid.setAttribute("src",pichref);  
       
     //替换的目标  
     var qqlink=document.getElementById("qqlick");  
     //替换的内容  
     var title=qqhref.getAttribute("title");  
     //用title替换href  
     qqlink.setAttribute("href",title);  
 }  
 </script>  
 <body>  
 <h1>图片</h1>  
 <li>  
 <a href="image/Chrysanthemum.jpg" title="image1" οnclick="show(this);return false;" οnmοuseοver="show(this);return false;">图片1</a></li>  
 <li><a href="image/Desert.jpg" title="image2"  οnclick="show(this);return false;" οnmοuseοver="show(this);return false;">图片2</a></li>  
 <li><a href="image/Hydrangeas.jpg" title="image3"  οnclick="show(this);return false;"οnmοuseοver="show(this);return false;">图片3</a></li>  
 <li><a href="image/Jellyfish.jpg" title="image4"  οnclick="show(this);return false;"οnmοuseοver="show(this);return false;">图片4</a></li><br/>  
 <img src="image/Tulips.jpg" id="imgBack" alt="背景图片" >  
 <p>  
  
 //动态改变图片 并且每个图片背后的链接也都随着改变  
 <a href="image/Chrysanthemum.jpg" title="http://www.qq.com"  οnclick="showqq(this);return false;">腾讯</a>  
 <a href="" id="qqlick"><img src="" id="imgBackQQ" alt="背景图片" ></a>    
 </body>   
 </html>  
原文：http://www.software8.co/wzjs/Javascript/1786.html
 