Change image onclick with javascript

How to change image with onclick javascript event on your web page? Easy, just follow instructions you find here.

The onclick event occurs when the user clicks on some element on web page, most when button is clicked. So if you visited this article you probably want some image appear after some button is clicked (then onclick event occurs).

There are two demonstrations and explanations:

• change image when button is clicked


• change image when image is clicked

If you like jQuery visit: Alternate image on click with jQuery.

Change image when button is clicked

Give a look at demonstration below, when "Show redo" button is clicked onclick event occurs and image is changed to "redo" image. When "Show undo" is clicked image is changed to "undo" image.

  

Try to click and make sure.

Here is step by step guide how to make onclick change image demonstration.

• first you need to add one img element and two input elements.

<p>
        <img alt="" src="http://www.userinterfaceicons.com/80x80/redo.png" 
            style="height: 85px; width: 198px" id="image" /></p>
    <p>
        <input id="Button1" type="button" value="Show redo" onclick="ShowRedo()" />&nbsp;&nbsp; 
<input id="Button2" type="button" value="Show undo" onclick="ShowUndo()" /></p>




• second step is to add javascript code which will be called when one of input elements (buttons) is clicked

  <script language="javascript">
      function ShowRedo() 
  {
          document.getElementById("image").src = "http://www.userinterfaceicons.com/80x80/redo.png";  
      }
  
      function ShowUndo() 
  {
          document.getElementById("image").src = "http://www.userinterfaceicons.com/80x80/undo.png"; 
      }
  </script>
  

  
  


• so, when Button1 is clicked, onclick event occurs and ShowRedo() method is called. ShowRedo method change image to "Redo" image


• when Button2 is clicked, onclick event occurs and ShowUndo() method is called. ShowUndo method change image to "Undo" image


• here is complete code for this demonstration:

  
  <p>
          <img alt="" src="[PATHTOFIRSTIMAGE]" 
              style="height: 85px; width: 198px" id="image" /></p>
      <p>
          <input id="Button1" type="button" value="Show redo" onclick="ShowRedo()" />&nbsp;&nbsp; 
  <input id="Button2" type="button" value="Show undo" onclick="ShowUndo()" /></p>
  
  <script language="javascript">
      function ShowRedo() 
  {
          document.getElementById("image").src = "[PATHTOFIRSTIMAGE]";  
      }
  
      function ShowUndo() 
  {
          document.getElementById("image").src = "[PATHTOSECONDIMAGE]"; 
      }
  </script>
  

Change image when user cick on image

Below is example how to change image when user click on this image. Try to click it and image will change.

It is accomplished with very similar way like demonstration with two buttons and change image. The difference is that onclick event is happening when image is clicked not button.

• on the start we have image element with onclick event which call changeImage javascript merhod


• when onclick event of image occurs javascript method changeImage() is called


• if src attribute of image element is set to first image then second image is displayed


• if src attribute of image element is set to second image then first image is displayed



<p>
        <img alt="" src="http://www.userinterfaceicons.com/80x80/minimize.png" 
            style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"  />
</p>

<script language="javascript">
    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";
        }
    }
</script>