CODEWITHSUNDEEP
htmlimagebutton
user802609
user802609

Reputation: 809

HTML Button Change Image Source

Okay, I was wondering if this is possible. I want an image, and a totally separate button. When the button is clicked, I would like the Img Src to change from "images/test" to "images/test2"

Is this possible?

Let's just say I have a very simple site, with just an image and a button

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

How can I change this very simple HTML to do what I want?

Upvotes: 2

Views: 67323

Answers (1)

Murtaza
Murtaza

Reputation: 3065

Firstly, your img tag is not closed in your code. Secondly, you can change the image src on click of the button using simple javascript or jQuery. 

<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>

Upvotes: 4

Related Questions