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

windy_star

浏览: 14997 次
性别:
来自: 天津

最近访客更多访客>>

xudada

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

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" onclick="show(this);return false;" onmouseover="show(this);return false;">图片1</a></li>
<li><a href="image/Desert.jpg" title="image2"  onclick="show(this);return false;" onmouseover="show(this);return false;">图片2</a></li>
<li><a href="image/Hydrangeas.jpg" title="image3"  onclick="show(this);return false;"onmouseover="show(this);return false;">图片3</a></li>
<li><a href="image/Jellyfish.jpg" title="image4"  onclick="show(this);return false;"onmouseover="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"  onclick="showqq(this);return false;">腾讯</a>
<a href="" id="qqlick"><img src="" id="imgBackQQ" alt="背景图片" ></a>




</body>

</html>

分享到：

JavaScript 获取元素

2012-12-14 11:23
浏览 813
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

JavaScript 获取元素

最近访客更多访客>>