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 How to Create an Image Element using JavaScript? 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 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 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 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 Like