javascript change image onclick event

Add Onclick Event on HTML Image Tag in JavaScript

The onclick is added over an image tag inside HTML. The onclick event will make our image clickable. After a user clicks on the image, you can do whatever you want, like opening a new webpage, adding animations, changing an existing image with a new one, and so on. Inside the onclick , you can pass a function. Here, you can either create and call your function, which you have written in JavaScript or use existing functions available to us by the window object like window.open() .

This article will show how to display an image in a new browser tab when a user clicks on it using the onclick event. We will achieve this by creating a function and calling it inside the oncreate attribute of the HTML image tag.

Adding onclick Event on an HTML img Tag Using JavaScript

To achieve onclick event functionality in JavaScript, we first have to create a function and then call that function inside the onclick , which is present on the image tag inside the HTML. Here, we have taken an image, and when a user clicks on this image, the image will be opened in a new browser tab. We will be implementing this in the below example.

Below we have a basic HTML document, inside which we only have an img tag with the src attribute set to an image fetched from the server. On the onclick attribute of an image, we pass the openImg() function, which will call that function. We have not created this function yet. At the end of the file, we have linked our JavaScript file to create our function. See the code below.

 html lang="en"> head>  meta charset="UTF-8">  meta http-equiv="X-UA-Compatible" content="IE=edge">  meta name="viewport" content="width=device-width, initial-scale=1.0">  title>Documenttitle>  head> body>   img id="image" src="https://bit.ly/3jFwe3d" onclick="openImg()">   script src="./script.js">script>  body>  html> 

If you run the above code, this is how it will look like in the web browser.

Inside our JavaScript file, we have defined a function openImg() . Inside this function, we first have to get the reference to the img tag, which is present inside the DOM using its id attribute image . This can be done using document.getElementById() method. And then, we will store the image tag’s reference inside the image variable.

Since we want to show the same image inside a new browser tab, we also have to store the image source in a variable that we can get using the src attribute. In JavaScript, we just have to use image.src to access the source attribute, and then we will store it inside the source variable.

Finally, to display the image using its source, we can use the window.open() method. The window.open() method is used to open a new tab, and whatever we pass inside this function will be displayed inside the new tab. Here, we will pass the source variable, which contains the link of the image itself. This is how our JavaScript openImg() function looks like.

function openImg()  var image = document.getElementById('image');  var source = image.src;  window.open(source); > 

If you run the above code inside the web browser and click on the image, the image will be opened in a new browser tab, as shown below.

The HTML onclick image attribute helps make an image clickable in JavaScript. This can be used in various situations and depending on what kind of functionality you would like to implement for your website.

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

Related Article — JavaScript Image

Related Article — JavaScript Event

Copyright © 2023. All right reserved

Источник

JavaScript — change image on click

Leen-Kerr

In this article, we would like to show you how to change the image src on click event using JavaScript.

var image = document.querySelector('#image'); image.onclick = function() < image.src = 'https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png'; >;

var image = document.querySelector('#image'); image.addEventListener('click', function() < image.src = 'https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png'; >);

Practical examples

1. by clicking on image

In this section, we present practical example that changes image src when you click the image.

// ONLINE-RUNNER:browser;   
Click the image:
 
 
    

2. by clicking on button

In this section, we present practical example that changes image src when you click the button.

// ONLINE-RUNNER:browser;   Click me 
 
    

Note: check this article to know more about methods of how to add an onclick event to the HTML element.

References

Alternative titles

Источник

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

    h2 < text-align: center; font-size: 30px; >img#getImage < width: 300px; height: auto; border: 4px solid #a1a1a1; >div  
Change image onClick event here.
    

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.

 
Change image onClick event here.
 

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.

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.

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.

 
Change image onClick event here.
 
Image Change 

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

    h2 < text-align: center; font-size: 30px; >img#getImage < width: 300px; height: auto; border: 4px solid #a1a1a1; >div  
Change image onClick event here.
   

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.

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.

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.

Источник

Change an image with onclick()

I want to change an image to some other image when i click on the object. the code is stacked in the following order:

There is no closing tag in HTML like this. You simply need to use or/> for XHTML

10 Answers 10

To change image onclik with javascript you need to have image with id:

Then you could call the javascript function when the image is clicked:

function changeImage() < if (document.getElementById("imgClickAndChange").src == "http://www.userinterfaceicons.com/80x80/minimize.png")< document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/maximize.png"; >else < document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/minimize.png"; >> 

This code will set the image to maximize.png if the current img.src is set to minimize.png and vice versa. For more details visit: Change image onclick with javascript link

Or maybe and that is prob it

How about this? It doesn’t require so much coding.

If your images are named you can reference them through the DOM and change the source.

document["imgName"].src="https://stackoverflow.com/questions/newImgSrc.jpg"; 

document.getElementById("imgName").src="https://stackoverflow.com/questions/newImgSrc.jpg"; 

The most you could do is to trigger a background image change when hovering the LI. If you want something to happen upon clicking an LI and then staying that way, then you’ll need to use some JS.

I would name the images starting with bw_ and clr_ and just use JS to swap between them.

$("#images").find('img').bind("click", function() < var src = $(this).attr("src"), state = (src.indexOf("bw_") === 0) ? 'bw' : 'clr'; (state === 'bw') ? src = src.replace('bw_','clr_') : src = src.replace('clr_','bw_'); $(this).attr("src", src); >); 

Here, when clicking next or previous, the src attribute of an img tag is changed to the next or previous value in an array.

 
  
Previous
 
Next
 
   

If you don’t want use js, I think, you can use instead of img and then use css like

EDIT: Nope. Sorry it works only for :hover

You can try something like this:

This script helps to change the image on click the text:

The Human Body Parts :
Human-body-organ-diag-1 Human-body-organ-diag-2 Human-body-organ-diag-3 Human-body-organ-diag-4 Human-body-organ-diag-5