In this article, we are going to learn how can we Show Images on Click using HTML. We will also use some JavaScript as it will help us to create dynamic changes on web applications.
These are the following approaches by using these we can Show Images on Click using HTML:
Table of Content
Changing display properties of <img> attribute using JavaScript:
- In this method, we will set the display property inside the <img> tag using the style attribute.
- We have to set "display: none" for the image. After that, when the user clicks on the button.
- We will call a JavaScript function that will access the image to change its display property to block.
Example: In this example, we will change the display property of <img> attributes using Javascript.
HTML
<!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
- Obviously, with an empty src value, the user will not be able to see the image on the web page.
- We will set a value of the src attribute using the JavaScript function which is implemented for the user to click on the button.
- However, some browsers such as Chrome do not remove the broken image icon while using this method.
Example: In this example, we will use the <img> tag with an empty src attribute
HTML
<!DOCTYPE html>
<html>
<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
- We will use a Bootstrap modal to show an image while clicking on the button.
- We need to integrate the bootstrap CDN with the HTML code to use it.
- We can add bootstrap CDN to our HTML file as added in the below example code.
Example: In this example, we will see the use of the Bootstrap model.
HTML
<!DOCTYPE html>
<html>
<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>
Output:
Using JavaScript to Append Image to DOM
- Here we will create an Image element using document.createElement("img") to create a new image element.
- Set the src attribute of the image element to the image URL.
- Append Image to DOM using document.body.appendChild(image) to add the image element to the document body.
Example: In this example, we will see how to display image by appending it to DOM.
HTML
<!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() {
var imageContainer =
document.createElement("div");
imageContainer.className =
"image-container";
var image =
document.createElement("img");
image.src =
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png";
var 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:
