How to Show Images on Click using HTML ?
We’ll learn how to display images when someone clicks on them using HTML. We’ll also use a bit of JavaScript to make our web pages more dynamic. We’ll go through a few easy ways to do this, so you can choose the one that works best for you. Let’s get started!
Table of Content
- Changing display properties of attribute using JavaScript:
- Using tag with empty src attribute
- Using Bootstrap Modal
- Using JavaScript to Append Image to DOM
1. 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.
<!DOCTYPE html>
<html>
<head>
<style>
/* Set display to none for image*/
#image {
display: none;
}
</style>
</head>
<body>
<div>
<h1>w3wiki</h1>
<h3>Click on the button to see image</h3>
<!-- Add id to image -->
<img id="image"
src=
"https://media.w3wiki.net/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:
2. 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.
<!DOCTYPE html>
<html>
<body>
<div>
<h1>w3wiki</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.w3wiki.net/wp-content/uploads/20210915115837/gfg3.png"
document.getElementById("btnID")
.style.display = "none";
}
</script>
</body>
</html>
Output:
3. 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.
<!DOCTYPE html>
<html>
<body>
<h2>w3wiki</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.w3wiki.net/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:
4. 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.
<!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.w3wiki.net/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:
Contact Us