Last Updated : 05 Sep, 2024
Summarize
Comments
Improve
Display Images on Click Using HTML and JavaScript refers to techniques that dynamically show images when a user interacts with a webpage, such as clicking a button. This enhances user engagement by making web pages more interactive, using simple HTML, CSS, and JavaScript methods.
Table of Content
- Changing Display Properties of <img> Attribute using JavaScript
- Using <img> Tag with Empty src Attribute
- Using Bootstrap Modal
- Using JavaScript to Append Image to DOM
Changing Display Properties of <img> Attribute using JavaScript
This approach initially hides the image by setting the <img> tag’s display property to none. When a user clicks a button, a JavaScript function changes the display property to block, making the image visible on the webpage.
Example: In this example, the image is initially hidden using display: none. Clicking the “Show Image” button triggers the show() function, which displays the image and hides the button using JavaScript.
<!DOCTYPE html><html><head> <style> /* Set display to none for image*/ #image { display: none; } </style></head><body> <div> <h1>GeeksforGeeks</h1> <h3>Click on the button to see image</h3> <!-- Add id to image --> <img id="image" src="https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png" alt="GFG image" /> </div> <button type="button" onclick="show()" id="btnID"> Show Image </button> <script> function show() { /* Access image by id and change the display property to block*/ document.getElementById('image') .style.display = "block"; document.getElementById('btnID') .style.display = "none"; } </script></body></html>
Output:
Using <img> Tag with Empty src Attribute
This method uses an <img> tag with an empty src attribute, making the image invisible initially. When the user clicks a button, a JavaScript function sets the src attribute to the image URL, displaying the image on the webpage.
Example: In this example, the <img> tag initially has an empty src. Clicking the button triggers the show() function, dynamically setting the src to display the image and hiding the button.
<!DOCTYPE html><html><head> <title> Using <img> Tag with Empty src Attribute </title></head><body> <div> <h1>GeeksforGeeks</h1> <h3>Click on the button to see image</h3> <!-- img element without src attribute --> <img id="image" src="" /> </div> <button type="button" onclick="show()" id="btnID"> Show Image </button> <script> function show() { /* Get image and change value of src attribute */ let image = document.getElementById("image"); image.src ="https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png" document.getElementById("btnID") .style.display = "none"; } </script></body></html>
Output:
Using Bootstrap Modal
This approach uses a Bootstrap modal to display images. By integrating Bootstrap via CDN, a modal pop-up is triggered when the user clicks a button, showing the image within the modal’s content area, providing a neat and interactive display option.
Example: In this example, a Bootstrap modal is triggered when clicking the “Show image” button. The modal contains an image inside the body and a “Close” button in the footer. Bootstrap and jQuery are used for functionality.
<!DOCTYPE html><html><head> <title> Using Bootstrap Modal </title></head><body> <h2>GeeksforGeeks</h2> <p><b>Click on the button to see image</b></p> <!-- Button to launch a modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Show image </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <!-- Add image inside the body of modal --> <div class="modal-body"> <img id="image" src="https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png" alt="Click on button" /> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button> </div> </div> </div> </div> <!-- Adding scripts to use bootstrap --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script></body></html>
See AlsoW3Schools.comOutput:
Using JavaScript to Append Image to DOM
This approach creates a new <img> element dynamically using JavaScript. The image’s src attribute is set to the desired URL, and the element is appended to the DOM, making the image appear on the webpage when a button is clicked.
Example: In this example, clicking the “Show Image” button creates an image container with a close button. The container displays an image and can be closed by removing it from the document.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Show Image on Click</title> <style> body { text-align: center; } .image-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border: 1px solid #ccc; padding: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); z-index: 9999; max-width: 80%; max-height: 80%; overflow: auto; } /* Styling for the close button */ .close-btn { position: absolute; top: 5px; right: 5px; background-color: #f44336; color: white; border: none; padding: 5px 10px; cursor: pointer; } /* Styling for the image */ .image-container img { max-width: 100%; height: auto; } </style></head><body> <button onclick="showImage()"> Show Image </button> <script> function showImage() { let imageContainer = document.createElement("div"); imageContainer.className = "image-container"; let image = document.createElement("img"); image.src ="https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"; let closeButton = document.createElement( "button" ); closeButton.textContent = "Close"; closeButton.className = "close-btn"; closeButton.onclick = function () { document.body.removeChild( imageContainer ); }; imageContainer.appendChild( closeButton ); imageContainer.appendChild(image); document.body.appendChild( imageContainer ); } </script></body></html>
Output:
shubhamvora05
Improve
Next Article
