在两个图像之间切换
Switching between two images
我有这个简单的代码
<a title="disable music" id="mute_link" name="mute_link"
style="position:absolute;right:15px;top:15px;cursor:pointer;">
<img src="images/icons/stopmusic.png"
alt="stop playing music"
name="music"
onclick="document.images['music'].src='images/icons/stopmusicdis.png'">
</a>
我对此有个问题。我需要图像会改变每次点击后,这意味着我打开网站,我有那里的图像stopmusic.png。点击它后,我需要出现stopmusicdis.png。在第二次点击图像后,我需要回到stopmusic.png。有可能做到吗?
这是一个通用的解决方案。你只需要修改data-imgon和data-imgoff。
JsFiddle: http://jsfiddle.net/7Z4E5/
HTML:<a title="disable music" id="mute_link" name="mute_link">
<img src="http://placehold.it/350x150" data-imgon="http://placehold.it/350x150" data-imgoff="http://placehold.it/150x350" alt="stop playing music" name="music" id="music"/>
</a>
CSS: #mute_link{position:absolute;right:15px;top:15px;cursor:pointer;}
JavaScript: $(function () {
// Handler for .ready() called.
$("#mute_link").on("click", function () {
if ($("#music").data("imgon") === $("#music").attr("src")) {
//Change to OFF
$("#music").attr("src", $("#music").data("imgoff"));
} else {
//Change to on
$("#music").attr("src", $("#music").data("imgon"));
}
});
});
把这段代码放到你的javascript中:
document.getElementById("mute_link").addEventListener("click", function() {
var e = document.getElementsByName("music")[0];
e.src = e.src.indexOf("stopmusic.png") == -1 ?
"images/icons/stopmusic.png":"images/icons/stopmusicdis.png"
});
下面是一些javascript代码http://jsfiddle.net/gc9sW/
通过element.getElementById("id")
找到您的<img>
标签,然后检查其src
属性,并将其交换到o/
创建一个JavaScript函数并从onclick事件中调用
<img src="images/icons/stopmusic.png" alt="stop playing music" name="music" onclick="change_img()"
下面是你可以使用的函数:
<script>
function change_img(){
if (document.getElementById("img").getAttribute("name") == "img1"){
document.getElementById("img").src = "new url"
document.getElementById("img").setAttribute("name", "img2")
}else {
document.getElementById("img").src = "old url"
document.getElementById("img").setAttribute("name", "img1")
}
}
</script>
它变成另一个图像和后面
我来告诉你这个想法。使用jquery或javascript
- 为每个图像添加点击事件。
- 内部点击事件为第一个图像,改变图像为第二个图像
- 内部点击第二个图像的事件,将图像更改为第一个图像
希望你能理解
的例子:html:
<div id="img"><img src="image1.jpg" alt="image1"></div>
jquery $("#img").click(function(){
if($("img").attr('src')=="image1.jpg"){
$("img").attr('src','image2.jpg');
}
else
{
$("img").attr('src','image1.jpg');
}
});
这只是一个例子
相关文章:
- 静态html中图像之间的空间在javascript中消失
- 是否可以在jquery中使用拖动滑块在4个图像之间滑动
- 在jQuery中创建两个图像之间的行
- 预加载图像和缓存图像之间有区别吗
- 如何使用计时器在图像之间切换?(设置间隔)
- 如何在两个图像之间添加空间
- 一种在指定时间后更改的背景图像之间添加更平滑过渡的简单方法
- 图像之间的间隔不同
- 如何在 javascript 中检测两个图像之间的冲突
- 如何在两个连续的图像之间插入黑色空格
- 在导航幻灯片中的图像之间淡入淡出
- 在背景颜色背景图像之间分层文本
- 在多个图像之间切换
- 在图像之间连续淡入淡出和旋转
- 如何获取我的 x 和 y 值以检测 html5 画布中两个图像之间的冲突
- 正在删除图像之间不需要的空间
- 如何使用背景图像COVER在图像之间进行转换
- 显示/隐藏文本区域框+单击时在图像之间切换
- 移动滑块时在图像之间切换
- 在图像之间淡入淡出