How to Swap Images in JavaScript

While creating an attractive web page or a website, there can be a requirement to swap the images in order to link them or create an effect. For instance, displaying a cropped or dotted version of an image and the original image simultaneously illustrates the photo editing effect. In such a scenario, swapping images in JavaScript does wonders in increasing the overall responsiveness of a web page or a site.

This article will check out the methodologies for swapping images in JavaScript.

How to Swap Images in JavaScript?

To swap images in JavaScript, the following methods can be utilized:

“match()” method with an “onclick” event
“includes()” method with “onmouseover” event
Side by side swapping using the “src” attribute

The following approaches will demonstrate the concept one by one!

Method 1: Swap Images in JavaScript Using match() Method With onclick Event

The “match()” method matches a string against a regular expression, and the “onclick” event redirects to the accessed function upon the button click. These methods can be implemented in combination to match the image source and swap it with a different image by specifying its path.

Syntax

string.match(match)

In the given syntax, “match” refers to the value that needs to be searched and matched.

Let’s look at the following example.

Example
In the below-given example, we will add the following heading using the “<h2>” tag:

<h2>Swap the Images</h2>

Now, create a button with an onclick event redirecting to the function named “swapImages()”:

After that, specify the source of the default image along with its id and adjusted height respectively:

Now, define the function named “swapImages()”. It will, firstly, access the specified image using the “document.getElementById()” method. Then, apply the “src” attribute along with the “match()” method to apply a check on the default image in its argument. If the specified source matches the default image, the “src” attribute will change its value to a different image. This will result in the swapping of both images:

function swapImages(){
var get = document.getElementById('getImage');
if (get.src.match("imageupd1.PNG")){
get.src = "imageupd2.PNG";
}
else{
get.src = "imageupd1.PNG";
}
}

The corresponding output will be as follows:

Method 2: Swap Images in JavaScript Using includes() Method With onmouseover Event

The “includes()” method checks if a string contains a specified string in its argument and the “onmouseover” event occurs when the cursor is moved onto the specified element. More specifically, these techniques can be implemented to check the image source and swap the specified images on hovering.

Example
Here, we will first include the following heading element:

<h2>Swap the Images</h2>

Next, specify the image source and adjust its dimensions. Also, include an event named “onmouseover” which will access the function named swapImages() with the specified id:

After that, define the function named “swapImage()”. Now, repeat the previously discussed steps to access the default image.

In the next step, apply the “includes()” method to check if the “src” attribute includes the default image in its argument. If so, the particular attribute will be assigned a new image path to swap on the mouse hover. In the other case, the same image will be retrieved in “else” condition:

function swapImages(){
var get = document.getElementById('getImage');
if (get.src.includes("imageupd1.PNG")){
get.src = "imageupd2.PNG";
}
else{
get.src = "imageupd1.PNG";
}
}

Output

Method 3: Side by Side Image Swapping Using src Attribute

In this particular method, the two specified images will be swapped side by side by accessing the images and equalizing them using the “src” attribute.

Example
First, we will include the desired images with their specified paths and dimensions:

Next, create a button with an “onclick” event invoking the function named swapImages() when clicked:

Now, we will declare a function named “swapImages()” which will firstly access images by their ids using the “document.getElementById()” method. Then, the “src” attribute will link the accessed images in such a way that the src of the first image equals the second, and thus images get swapped when the added button is clicked:

function swapImages(){
let get1 = document.getElementById("img1");
let get2 = document.getElementById("img2");
let fetch = get1.src;
get1.src = get2.src;
get2.src = fetch;
}

Output

We have discussed various methods to swap images in JavaScript.

Conclusion

To swap images in JavaScript, utilize the “match()” method with an “onclick” event to match the default image and swap it with a different image upon the button click, the “includes()” method with an “onmouseover” event to swap the default image with the specified image upon the mouse hover or equalize the “src” attribute of both the images to swap the images side by side. This write-up demonstrated the methods to swap images in JavaScript.

How to Swap Images in JavaScript