您的位置：首页 > Web前端 > JavaScript

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

2012-12-16 11:59 555 查看

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" 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>
原文：http://www.software8.co/wzjs/Javascript/1786.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航