How to Change Image Source in JavaScript

Navigating the world of programming can often feel like learning a new language. Working with JavaScript, one of the most popular scripting languages for web development, we often encounter situations where we need to manipulate the elements of a webpage. A common task among these is changing an image source.

You might ask, why would you want to change an image source using JavaScript? Well, it comes in handy to enhance user interaction, add dynamism or create a visual narrative on your webpage. Let’s discover effective ways for altering image sources, making your website more interactive and engaging.

In this post, we will be looking at the following 3 ways to change image source in JavaScript:

• By using the setAttribute() method
• By directly modifying the src property
• By using the dot notation method

Let’s explore each…

#1 – By using the setAttribute() method

The setAttribute() method in JavaScript allows us to change the source of an image by assigning a new URL to the ‘src’ attribute of an img element. Here’s an example:

 function changeImage() {
 var img = document.getElementById('image');
 img.setAttribute('src', 'new_image.jpg');
 }

How it works

The setAttribute() method modifies the value of the ‘src’ attribute of the img element, effectively changing the image displayed on the webpage.

• First, we get a reference to the image element by using document.getElementById('image'). This assumes that the img element has an id of “image”.
• Next, we call the setAttribute() method on the img element. This method takes two arguments: the name of the attribute to change, and the new value for the attribute.
• In this case, we are changing the ‘src’ attribute, which specifies the URL of the image. The new value is ‘new_image.jpg’, which is the filename of the new image we want to display.
• The image source is now updated, and the new image will be displayed on the webpage.

#2 – By directly modifying the src property

Changing the image source in JavaScript using the ‘src’ property allows you to dynamically modify an image on your webpage. We will take an example of an image with an id ‘myImage’, and change its source using JavaScript.

document.getElementById('myImage').src = 'newImage.jpg';

How it works

JavaScript allows us to access and manipulate HTML elements. In this case, we are accessing an image element using its ‘id’ and modifying its ‘src’ attribute to change the image.

• First, we use document.getElementById('myImage') to select the image element with the id ‘myImage’.
• Then, we use the .src property to get or set the ‘src’ attribute of the selected image element.
• Finally, we set the ‘src’ property to ‘newImage.jpg’, which is the new image file we want to display. This file should be located at the root of your project or you should provide the relative path to the file.

#3 – By using the dot notation method

In JavaScript, you can easily change an image’s source by selecting the image element and then using dot notation to alter its ‘src’ attribute; an example can simplify this concept.

// JavaScript
document.getElementById('myImage').src = 'newImage.jpg';

How it works

This script selects the image element with the id ‘myImage’ and changes its source attribute to ‘newImage.jpg’, effectively replacing the original image with a new image.

• First, ‘document.getElementById(‘myImage’)’ is used to select the HTML image element with the id ‘myImage’. The document object represents the web page loaded into the browser and ‘getElementById’ is a method it provides to select an element by its id.
• Then, ‘.src’ is used to refer to the ‘src’ (source) attribute of the selected image element. The ‘src’ attribute specifies the path to the image file.
• Finally, ‘= ‘newImage.jpg” assigns a new value to the ‘src’ attribute, thereby changing the image that is displayed on the web page. ‘newImage.jpg’ should be the path to the new image file.

Related:

• How to Access -1 Index in JavaScript Arrays
• How to Use Shorthand If-Else Statements in JavaScript
• How to Subtract Dates in JavaScript

In conclusion, altering the source of an image in JavaScript is a simple and effective method that gives you greater control over your web content. The ability to dynamically change images adds versatility to your website, enhancing user experience.

Remember, all it takes is to target the image element using its ID or class and then change the ‘src’ attribute. With this knowledge, you are one step closer to making your website more interactive and engaging. Practice and experiment with this technique to master it.

• Category: How to