Question

我有这个简单的代码

<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。有可能吗？

Answer 1

这是一种肾上腺解决方案。您只需要更改数据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"));
        }
    });
});

Answer 2

我会告诉你这个想法。使用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'); } });

这只是一个例子。

Answer 3

创建一个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>

它会更改为其他图像并返回

Answer 4

将此代码放入您的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"
});

Answer 5

这里有一些javascript http://jsfiddle.net/gc9sW/

的小提琴

通过<img>找到您的element.getElementById("id")代码，然后检查其src属性，并将其交换为o /

在两个图像之间切换

5 个答案: