How to Show Images on Click using HTML ?
Occasionally, web pages might contain images that are not relevant to the content of that page. These unusual images are loaded while the web page is loading, and this increases the loading time. More loading time on web pages can decrease the number of visitors.
- Create <img> element in the HTML code.
- Add style to <img> element and set display properties to none.
- Add a button in HTML code that calls the “show()” function when the user clicks on it.
- Create <img> element with an empty src attribute.
- Add an HTML button that calls the “show()” function, when the user clicks on it.
Example: In this example, we will use the <img> tag with an empty src attribute
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.
- Add bootstrap CDN to the HTML file.
- Create a Bootstrap modal and add an image to the body of the modal.
- Create an HTML button to trigger a modal.
Example: In this example, we will see the use of the Bootstrap model.
Please Login to comment...