Question

我正在使用html和非常基本的jQuery的组合来制作一个像按钮一样工作的img，这样当单击img时，图像的src（src1）会变为另一个src（src2，那个是按下按钮的图像）。我试图这样做，如果点击相同的图像（现在是src2），它会变回原来的src（src1）。

我希望理解并不令人头疼，如果需要，我可以澄清。

以下是我的代码：

<!--Html-->
<body>
<img id="pixelbutton" src="images/pixelbutton.png" onClick="pixelbuttonclick()" />
</body>

/* jQuery */

function pixelbuttonclick() {
var pixelbutton = document.getElementById("pixelbutton");

if (pixelbutton.style.src=="images/pixelbutton.png") {
    document.getElementById("pixelbutton").src="images/pixelbutton_press.png";
    }


else if (pixelbutton.style.src=="images/pixelbutton_press.png") {
    document.getElementById("pixelbutton").src="images/pixelbutton.png";
    }

}

我是一个巨大的菜鸟，所以如果可能的话，不那么复杂的答案会受到赞赏。

Answer 1

而不是替换URL可以使用带有background-image css属性的div，并在单击div时设置另一个类，将另一个图像作为背景图像

Answer 2

我建议您将功能置于头部，以确保一致性。

你的＆＃34; pixelbutton.style.src＆＃34;是错误的，因为src是一个属性而不是css，但操纵URL相当困难。我同意Amareswar在css中使用背景图片的答案。

我这样做的另一种方法是使用jQuery代码：

<script type="text/javascript">
    $(document).ready(function(){
        $("#pixelbutton").click(function(){
            $("#pixelbutton").css({'display':'none'})
            $("#pixelbutton2").css({'display':'block'});
        })
        $("#pixelbutton2").click(function(){
            $("#pixelbutton2").css({'display':'none'})
            $("#pixelbutton").css({'display':'block'});
        })
    })
</script>

并修改您的正文代码：

<img id="pixelbutton" src="images/pixelbutton.png" />
<img id="pixelbutton2" src="images/pixelbutton_press.png" style="display: none;" />

图像作为按钮 - 单击时更改图像

2 个答案: