We are displaying the best method to JavaScript change image onclick event with the example. As well as, given another way to implement ‘change image on button click javascript’.
Also, We can do change image on mouse hover and mouse click event in the below section. After that, showing an example of change multiple image onclick.
Table of Contents
JavaScript Change Image onclick Event
<!DOCTYPE html>
<html>
<head>
<title>javascript change image onclick event
</title>
<style type="text/css">
h2 {
text-align: center;
font-size: 30px;
}
img#getImage {
width: 300px;
height: auto;
border: 4px solid #a1a1a1;
}
div {
text-align: center;
}
</style>
</head>
<body>
<div>
<h2>Change image onClick event here...</h2>
<img src="imageName1.jpg" id="getImage">
</div>
<div>
<input type="button" onclick="imagefun()" value="Change Image">
</div>
<script>
function imagefun() {
var Image_Id = document.getElementById('getImage');
if (Image_Id.src.match("imageName1.jpg")) {
Image_Id.src = "imageName2.jpg";
}
else {
Image_Id.src = "imageName1.jpg";
}
}
</script>
</body>
</html>Here, the whole code of change image with onclick event. So, I am telling you about this code.
Firstly, we created an Html code structure and also, created an image tag and button in the body section.
Under, you can see this button and images code. After that, I have to add the image source path and put an id for getting the source code.
Thus, the Id name is getImage and image source name imageName1.
Afterward, added a script in the below code and apply function. Now, add function in the button tag which is name imagefun with onclick() event.
Now, about in the function getting image src by id using JavaScript document.getElementById().
So then, added an if the condition for change image onclick event. There are define two image source codes and change with onclick event.
Here, showing parts of implement to change multiple images. Firstly, the visible code of image and input button in the below section.
<div>
<h2>Change image onClick event here...</h2>
<img src="imageName1.jpg" id="getImage">
</div>
<div>
<input type="button" onclick="imagefun()" value="Change Image">
</div>
Under, This is Html code which we added in the body section as you saw.
Secondly, Displaying JavaScript code after the Html code. You can see above an example.
<script>
function imagefun() {
var Image_Id = document.getElementById('getImage');
if (Image_Id.src.match("imageName1.jpg")) {
Image_Id.src = "imageName2.jpg";
}
else {
Image_Id.src = "imageName1.jpg";
}
}
</script>Additionally, we created some implement for design structure to better show image and button on the front end. So, This is a stylesheet in the below code.
<style type="text/css">
h2 {
text-align: center;
font-size: 30px;
}
img#getImage {
width: 300px;
height: auto;
border: 4px solid #a1a1a1;
}
div {
text-align: center;
}
</style>Here, these are some methods to get elements using JavaScript.
- JavaScript Get Last Element of Array
- How to Pass Parameter in JavaScript Function From Html
- Email Validation in JavaScript: Simple Form Example
Replace Image on Button Click JavaScript
Similarly, you can use for change image on button click using javascript. therefore, we have provided an example in the below area.
<div>
<h2>Change image onClick event here...</h2>
<img src="imageName1.jpg" id="getImage">
</div>
<div>
<button onclick="imagefun()">Image Change</button>
</div>So, you can change only one line from the Html code. Likewise, replace the input tag to button this is the main code line.
After that, all codes same as above we define script code. you might add a script tag with function.
Replace Picture onclick CSS
Similarly, you can use CSS in our Html code. I already defined style with onclick() event. Also, change image size and button design.
As well as, showing alignment you can copy this code which we provided above area.
Hence, you can add another CSS design that you want on your page. There have many components to relate your CSS style.
How to Change Image on Mouse Click in JavaScript
<!DOCTYPE html>
<html>
<head>
<title>javascript change image onclick event
</title>
<style type="text/css">
h2 {
text-align: center;
font-size: 30px;
}
img#getImage {
width: 300px;
height: auto;
border: 4px solid #a1a1a1;
}
div {
text-align: center;
}
</style>
</head>
<body>
<div>
<h2>Change image onClick event here...</h2>
<img src="imageName1.jpg" onmouseover="imagefun()" id="getImage">
</div>
<script>
function imagefun() {
var Image_Id = document.getElementById('getImage');
if (Image_Id.src.match("imageName1.jpg")) {
Image_Id.src = "imageName2.jpg";
}
else {
Image_Id.src = "imageName1.jpg";
}
}
</script>
</body>
</html>Here, we add a mouse hover event. When you click and want to change image going to on image through the mouse.
Then, automatically change the image on the mouse click event. So, you can use this code
otherwise, added only this line, and remove old input and button code from your editor.
<img src="imageName1.jpg" onmouseover="imagefun()" id="getImage">JavaScript Change Multiple Images onclick
Hence, there are we implement two images to change. Therefore, it means you can add more images to change multiple images of onclick events.
Now, given an example for change multiple images using on click event check below code.
function imagefun() {
var Image_Id = document.getElementById('getImage');
if (Image_Id.src.match("imageName1.jpg")) {
Image_Id.src = "imageName2.jpg";
Image_Id.src = "imageName3.jpg";
}
else {
Image_Id.src = "imageName1.jpg";
}
} As an example, we added another image source with script code. Afterward, displaying multiple images from these codes. You can add more images as you want on your page.
Conclusion
Finally, you saw many methods to JavaScript change image onclick event. Also, if you have any other queries you can ask us. Here this is the main point for change image with onclick event using JavaScript.
Have you thought about adding some sort of bookmarking buttons or links to your website?
I was recommended this website by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my problem. You are amazing! Thanks!
Awseome article, I am a big believer in leaving comments on blogs to help the blog writers know that theyve added something useful to the world wide web!
My brother suggested I might like this blog. He was once totally right. This post truly made my day. You can not imagine just how much time I had spent for this info! Thank you!
Hello there, just became aware of your blog through Google, and found that it’s really informative. I?m gonna watch out for brussels. I will be grateful if you continue this in future. Numerous people will be benefited from your writing. Cheers!