Using JavaScript to Change the Image src

To change the src of an image using JavaScript, we simply use the image src property along with the getElementById method.

document.getElementById("img1").src = "anotherImg.jpg";

Let’s say I have the following HTML code:

<div id="div1">
  <img id="img1" src="img.jpg">
</div>

To change the image src of #img1 from img.jpg to anotherImg.jpg, we will use the src property in the following JavaScript code:

document.getElementById("img1").src = "anotherImg.jpg";

Using JavaScript to Change the Image src with a Click

To change the source of an image we can combine the src property with a click event.

Let’s say we have the same HTML from above.

<div id="div1">
  <img id="img-1" src="http://theprogrammingexpert.com/wp-content/uploads/example-img1.png">
  <div id="click-me" onclick="changeIMG()">Change image</div>
</div>

We have two images, example-img1.png is a picture of gears and example-img2.png is the same image, but with different colors.

We have added an onclick event to the #click-me div which will run a function where we can change the image from the example-img1.png version to the example-img2.png version.

Here is the function below that will accomplish this:

function changeIMG(){
  document.getElementById("img-1").src = "http://theprogrammingexpert.com/wp-content/uploads/example-img2.png";
};

The final code and output for this example of how to change the source of an image using the src property and JavaScript is below:

Code Output:

Change image

Full Code:

<style>#img-1 { height:100px; }</style>
<div id="div1">
  <img id="img-1" src="http://theprogrammingexpert.com/wp-content/uploads/example-img1.png">
  <div id="click-me" onclick="changeIMG()">Change image</div>
</div>

<script>

function changeIMG(){
  document.getElementById("img-1").src = "http://theprogrammingexpert.com/wp-content/uploads/example-img2.png";
};

</script>

Using JavaScript to Toggle Image src with a Click

To toggle the source of an image we simply need access to another image, or use our original image URL.

We will use the same HTML.

<div id="div1">
  <img id="img-2" src="http://theprogrammingexpert.com/wp-content/uploads/example-img1.png">
  <div id="click-me" onclick="toggleIMG()">Toggle image</div>
</div>

We have two images, example-img1.png is a picture of gears and example-img2.png is the same image, but with different colors. We will toggle between these two images.

We will modify our function slightly to toggle the image instead of just changing it once.

Here is the function below that will accomplish this:

function toggleIMG(){
  if( document.getElementById("img-2").src == "http://theprogrammingexpert.com/wp-content/uploads/example-img1.png" ) {
 document.getElementById("img-2").src = "http://theprogrammingexpert.com/wp-content/uploads/example-img2.png"; 
  } else {
 document.getElementById("img-2").src = "http://theprogrammingexpert.com/wp-content/uploads/example-img1.png";  
  }
};

The final code and output for this example of how to toggle the source of an image using the src property and JavaScript is below:

Code Output:

Toggle image

Full Code:

<style>#img-2 { height:100px; }</style>
<div id="div1">
  <img id="img-2" src="http://theprogrammingexpert.com/wp-content/uploads/example-img1.png">
  <div id="click-me" onclick="toggleIMG()">Toggle image</div>
</div>

<script>

function toggleIMG(){
  if( document.getElementById("img-2").src == "http://theprogrammingexpert.com/wp-content/uploads/example-img1.png" ) {
 document.getElementById("img-2").src = "http://theprogrammingexpert.com/wp-content/uploads/example-img2.png"; 
  } else {
 document.getElementById("img-2").src = "http://theprogrammingexpert.com/wp-content/uploads/example-img1.png";  
  }
};

</script>

Hopefully this article has helped you understand how to use JavaScript to change the image src of an image.