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

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

html button image

Html 图像作为按钮--单击时更改图像,html,button,image,Html,Button,Image,我结合使用html和非常基本的jQuery来创建一个功能类似于按钮的img，这样当单击img时，图像的src（src1）更改为另一个src（src2，即按下按钮的图像）。我试图使它这样，如果相同的图像（现在是src2）被点击，然后它会变回原来的src（src1）我希望这不是一个让人头疼的问题，如果需要的话，我可以澄清一下以下是我的代码：  <body> <img id="pixelbutton" src="images/pixelbutt

我结合使用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";
    }

}


/*jQuery*/
函数pixelbuttonclick（）{
var pixelbutton=document.getElementById（“pixelbutton”）；
if（pixelbutton.style.src==“images/pixelbutton.png”）{
document.getElementById（“pixelbutton”）.src=“images/pixelbutton\u press.png”；
}
else if（pixelbutton.style.src==“images/pixelbutton\u press.png”）{
document.getElementById（“pixelbutton”）.src=“images/pixelbutton.png”；
}
}

我是一个大傻瓜，所以如果可能的话，不太复杂的答案是值得赞赏的。

可以使用带有背景图像css属性的div，并在单击div时设置另一个类，将另一个图像作为背景图像。

如果没有，我建议将函数放在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>


$（文档）.ready（函数（）{
$（“#像素按钮”）。单击（函数（）{
$（“#像素按钮”）.css（{'display'：'none'}）
$（“#像素按钮2”）.css（{'display'：'block'}）；
})
$（“#像素按钮2”）。单击（函数（）{
$（“#像素按钮2”）.css（{'display'：'none'}）
$（“#像素按钮”）.css（{'display'：'block'}）；
})
})

修改你的身体密码：

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

哦，对不起，我还不太清楚JavaScript和jQuery之间的区别。