1

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

}

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

4

2 回答 2

0

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

于 2012-10-17T02:39:34.080 回答
0

如果您没有，我建议将您的功能放在头部以保持一致性。

您的“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;" />
于 2012-10-17T03:31:07.117 回答