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>

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