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

【问题标题】：Image As a Button -- Changes Image When Clicked图像作为按钮 - 单击时更改图像
【发布时间】：2012-10-07 05:38:33
【问题描述】：

我正在使用 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";
    }

}

我是一个大菜鸟，所以如果可能的话，不那么复杂的答案不胜感激。

【问题讨论】：

哦抱歉，我还是不太清楚 JavaScript 和 jQuery 的区别。

标签： html button image

【解决方案1】：

如果你没有，我建议将你的函数放在 head 部分以保持一致性。

您的“pixelbutton.style.src”是错误的，因为 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】：

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

【讨论】：