Using onclick to change an image

Lorne · October 24, 2019

I have several images that show different results of an event. I want my page to load with image1 visible, the rest hidden, and the user to be able to click text under the image to hide what is visible and show another image in its place. The image is in a table but does not have to be. This is my failed attempt to try and get it to work with 2 images:

in my html body:

<p>Click <a onclick="SwapImage()" href="#">here</a> to swap image</p>

and the javascript function executed by the click:
function SwapImage(){
document.getElementsById("mygraph").style.visibility = 'hidden';
document.getElementsById("myfilter").style.visibility = 'visible';
}

but the javascript does nothing. I also tried display instead of visibility none or block with no success. The first image shows up with the second hidden but does not change when clicking the text.

Can anybody help ?

Lorne · October 24, 2019

Thought I had better add that I also tried (without success) just loading the first image with onclick executing the following code via ChangeImage('Images/GraphFilter.gif'):

function ChangeImage(imgName){
var image = document.getElementsById('mygraph');
image.src = imgName;
}

Lorne · October 24, 2019

OK - solved it. You have to use the full file path from the web server root to the image rather than the relative path from the folder with the html code to the folder with the images. This function now works.

Makwana Prahlad · February 4, 2020

Hello,@Lorne
Please try this code, How to change image using onclick:

<!DOCTYPE html>
<html>
<head>
    <title>onClick Demo</title>
</head>
<body>
<script>
function toggleImage() {
   var img1 = "http://placehold.it/350x150";
   var img2 = "http://placehold.it/200x200";
   
   var imgElement = document.getElementById('toggleImage');

   imgElement.src = (imgElement.src === img1)? img2 : img1;
}
</script>
<img src="http://placehold.it/350x150" id="toggleImage" onclick="toggleImage();"/>

</body>
</html>

I hope above code will be useful for you.

Thank you.

Sign In

Using onclick to change an image

Recommended Posts

Lorne

Link to comment

Share on other sites

Lorne

Link to comment

Share on other sites

Lorne

Link to comment

Share on other sites

Makwana Prahlad

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity