HTML按钮更改图像源_Html_Image_Button

HTML按钮更改图像源

html image button

HTML按钮更改图像源,html,image,button,Html,Image,Button,好的，我想知道这是否可行。我想要一张图片和一个完全独立的按钮。单击按钮时，我希望Img Src从“images/test”更改为“images/test2” 这可能吗假设我有一个非常简单的网站，只有一张图片和一个按钮 <html> <head>... </head> <body> <img src="images/test"/> <br/><br/><br/> <button>Cl

好的，我想知道这是否可行。我想要一张图片和一个完全独立的按钮。单击按钮时，我希望Img Src从“images/test”更改为“images/test2”

这可能吗

假设我有一个非常简单的网站，只有一张图片和一个按钮

 <html> 
<head>...
</head>
<body>
<img src="images/test"/>
<br/><br/><br/>
<button>Click to change image!</button>
</body>
</html>


...




单击以更改图像！

如何更改这个非常简单的HTML来实现我的目标？

首先，您的

img

标记在代码中没有关闭。其次，您可以使用简单的javascript或jQuery单击按钮来更改图像

src

<html> 
<head> 
<script> 

function changeImage()
{
var img = document.getElementById("image");
img.src="images/test2";
return false;
}

</script>

</head>
<body>
<img id="image" src="images/test" />
<br><br><br>
<button id="clickme" onclick="changeImage();">Click to change image!</button>
</body>
</html>


函数changeImage（）
{
var img=document.getElementById（“图像”）；
img.src=“images/test2”；
返回false；
}




单击以更改图像！

在css和悬停效果或javascript事件中使用背景