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

最新推荐文章于 2022-09-29 15:59:14 发布

windy_star0909

最新推荐文章于 2022-09-29 15:59:14 发布

阅读量177

点赞数

分类专栏： JavaScript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/windy_star0909/article/details/84367943

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

<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>