JavaScript- Set an Image Source Dynamically Using JS Last Updated : 19 Dec, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report These are the following ways to change the given image dynamically: 1. Using src Property of JSThe approach behind this code is to allow the user to change an image dynamically when they click a button. Upon clicking the "Change Image" button, the 'changeImage' function is triggered, which updates the 'src' attribute of the image element to display a new image. This provides an interactive way to swap content on the page in response to user actions. HTML <!DOCTYPE html> <html lang="en"> <body> <img id="myImage" src= "https://media.geeksforgeeks.org/wp-content/uploads/20241216161009363184/Nodejs-Design-patterns.webp" alt="Initial Image"> <button onclick="changeImage()">Change Image</button> <script> function changeImage() { // Get the image element by its ID let img = document.getElementById("myImage"); // Set the new image source img.src = "https://media.geeksforgeeks.org/wp-content/uploads/20241214171552887389/Expressjs-tutorial.webp"; // Change to a different image } </script> </body> </html> 2. Based on ConditionThe approach behind this code is to change the displayed image based on the time of day. When the page loads, the script checks the current hour. If it's before noon, it sets the image to a "nodejs-design-patterns" image; otherwise, it shows an "expressjs tutrorial" image. This dynamic behavior adjusts the content based on the system's time, offering a personalized user experience. HTML <!DOCTYPE html> <html lang="en"> <body> <img id="myImage" src= "https://media.geeksforgeeks.org/wp-content/uploads/20241216161009363184/Nodejs-Design-patterns.webp" alt="Initial Image" width="300"> <script> // Example: Change image based on the time of day window.onload = function() { let img = document.getElementById("myImage"); let hour = new Date().getHours(); // Get current hour if (hour < 12) { img.src = "https://media.geeksforgeeks.org/wp-content/uploads/20241216161009363184/Nodejs-Design-patterns.webp"; // Display morning image } else { img.src = "https://media.geeksforgeeks.org/wp-content/uploads/20241214171552887389/Expressjs-tutorial.webp"; // Display evening image } }; </script> </body> </html> Comment More infoAdvertise with us Next Article Change Image Dynamically when User Scrolls Down | Set 2 M meetahaloyx4 Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to Change Image Dynamically when User Scrolls using JavaScript ? We are going to add the functionality to our web-page so that whenever the user scrolls up or scrolls down on the image, then the image changes. We have used only 3 images but it can easily be expanded for multiple images.We are keeping the images on top of each other, this makes sure only one image 4 min read How to Create an Image Element using JavaScript? Creating an image element dynamically using JavaScript is a useful technique when you want to add images to a webpage without having to manually write the <img> tag in your HTML. This allows for more flexibility, as we can create and manipulate images based on user interactions or other condit 2 min read Change Image Dynamically when User Scrolls Down | Set 2 Change Image Dynamically when User Scrolls using JavaScript | Set 1There may be situations where the image would need to change dynamically based on the user's input. In this case, when the user scrolls down. Approach:Setting up a scroll event listener to know the user has scrolled the page.Calculat 4 min read Creating a Simple Image Editor using JavaScript In this article, we will be creating a Simple Image Editor that can be used to adjust the image values like brightness, contrast, hue, saturation, grayscale, and sepia. Image editors allow one to quickly edit pictures after they have been captured for enhancing them or completely changing their look 10 min read How to find an average color of an image using JavaScript ? The average color of an image can be found with JavaScript by drawing the image on a canvas element. The following steps have to be performed to get the average color of an image: 1. The image is first drawn on the canvas using the method context.drawImage() of the Canvas 2D API. This method takes i 3 min read How to get the new image URL after refreshing the image using JavaScript ? The browser cache relies on the image URL to decide whether the image is the same or not and whether to use the stored version. It means if we change something within the URL and then attempt to reload the image, the cache will no longer be able to change that it is the same resource. The cache will 2 min read Like