JavaScript Change Image onclick Event

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.

javascript change image onclick event

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.

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

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

JAVASCRIPT

Recent Posts

Related Post

JavaScript Get Last Element of Array

As we know array to store multiple values. So, there are methods to get last element of an array using JavaScript. Also, you saw an example javascript get the last element of an array in the below section. As an example, we created an array and in array holds multiple values. as well as, array […]

Read more

How to fix WordPress jQuery is not defined

So, you are looking at how to fix ‘WordPress jQuery is not defined’. The major issue is some time WordPress ‘uncaught referenceerror: jquery is not defined’ or $ is not defined jQuery. Therefore, when does this error appear on the WordPress website? when jQuery is not defined on your WordPress project. they come to appear […]

Read more

How to Pass Parameter in JavaScript Function From Html

Here, you are looking at the best few examples that how to pass parameter in JavaScript function from Html. As well as, explain in detail what is a function parameter and multiple arguments pass with the onClick event using JavaScript function. For example, you saw an above example of a function with the passing two […]

Read more

x