How to Toggle Between 2 Images in Javascript

In this article, we show how to toggle between 2 images in Javascript.

Toggling between 2 images is very common on the web.

An example of this is a like button, which can be seen on many sites such as youtube and facebook.

At first, for a user, the button is unlit. After clicking on it, the button then lights up, showing that the user has liked the video or the post.

This is demonstrated below.

It almost has applications for things such as online text editors that have buttons such as making the text bold, italic, or underlined. When you click on these buttons, it's good to highlight them to show that they're selected.

So how do we do this in code?

Below is the source code for creating the like button shown above.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> //Javascript code <script> $(document).ready(function(){ $(document).on('click', '.likebutton', function(e){ var clickedstatus= $(this).attr('data-status'); if (clickedstatus == "clicked") { $('#likebuttonlocation').html('<img src="/images/like-button-clicked.png" style="cursor:pointer" class="likebutton" data-status= "unclicked"/>'); } else { $('#likebuttonlocation').html('<img src="/images/like-button.png" style="cursor:pointer" class="likebutton" data-status= "clicked"/>'); } }); }); </script> //HTML code <label id="likebuttonlocation"><img src="/images/like-button.png" style="cursor:pointer" class="likebutton" data-status="clicked"/></label>

Just like with many things with programming, there are many ways of doing it.

The way done in this example is simple enough, so it's probably a good way of doing it.

So, first, realize this isn't just pure Javascript, jQuery, so you must include the jQuery script tag to have it.

Next, you can skip over the Javascript and go to the HTML code.

The HTML code an image within a label tag.

The significance of the label tag is that provides the area that Javascript can target to change the image.

What we're really is doing is changing images from one to the other, back and forth, with clicks (click events).

In order to change the image, Javascript has to know where. We do this within the label tag which has an id of 'likebuttonlocation'.

This img element within this label has a number of attributes.

We want the image to show a pointer when a user hovers over it, so we give it the attribute, style="cursor:pointer"

Next, we give the button a class. This is important because we want target both images with a class. An id is unique to an element. A class is not. A class can be comprised of several elements. We want to give both like button images, unclicked and clicked, to be of the same class, so that we can target both images. The way we will distinguish them is by the custom data-status attribute we create next. You can always use custom attributes or id attributes to distinguish members of a class.

The data-status attribute will be "unclicked" for the unclicked like image and "clicked" for the clicked like image.

Now we go the Javascript code.

So this function is triggered with the click event.

We target any elements with the class of "likebutton", which are the 2 like button images, one unclicked and the other clicked.

Within this function, we create a variable, clickedstatus, which gets the data-status attribute.

If the status is clicked, then we change it to the unclicked like button image. If not, we change it to the clicked like button image.

And that is really all that is required in order to toggle between 2 images with Javascript and jQuery.

This is not the only way of doing it but a good, effective, simple way of doing it.

And this is how to toggle between 2 images in Javascript and jQuery.