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> 相关推荐
nmgxzm00 2020-11-10
ifconfig 2020-10-14
hhanbj 2020-11-17
zfszhangyuan 2020-11-16
古叶峰 2020-11-16
一个智障 2020-11-15
jipengx 2020-11-12
81427005 2020-11-11
xixixi 2020-11-11
游走的豚鼠君 2020-11-10
苗疆三刀的随手记 2020-11-10
Web卓不凡 2020-11-03
小飞侠V 2020-11-02
帕尼尼 2020-10-30
爱读书的旅行者 2020-10-26
帕尼尼 2020-10-23
杏仁技术站 2020-10-23
淼寒儿 2020-10-22