Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to show images with a click in JavaScript using HTML?
Showing images with a click in JavaScript is a common technique used in web development to create image galleries, slideshows, and other types of image−based applications. It allows users to navigate between images by clicking on buttons or other elements in the user interface, rather than using a static set of images that are always visible.
To show images with a click in JavaScript, you can use a combination of HTML, CSS, and JavaScript to define the structure and appearance of the image elements, and to specify the behavior of the buttons or other elements that will be used to navigate between the images.
In HTML, you can use the img element to define the image elements, and the style attribute to specify the CSS styles that will be applied to the images. You can also use the src attribute to specify the source of the images, and the alt attribute to provide a text alternative for users who cannot see the images.
In CSS, you can use the display property and a class name to hide and show the images as needed.
In JavaScript, you can use the querySelectorAll() method to select the image elements, and the addEventListener method to attach click event listeners to the button or navigation elements. In the event listener functions, you can use the classList property of the image elements to add and remove the class that controls their visibility, and you can use a loop or an array of image elements to iterate over the images and update their class names as needed.
Approach 1: Using the Style Display Property
To show images with a click in JavaScript using HTML, you can use the display property of the style object to hide and show the images as needed.
Syntax
Following is the syntax to display images using the display property in JavaScript −
myImage.style.display = "block";
Here "display" property of myImage is set to "block".
Steps
Here are the steps you can follow to show an image with a click in JavaScript using HTML −
Step 1 − Create an HTML file with a button element and an image element.
Step 2 − In the image element, use the style attribute to set the display property to "none". This will hide the image by default.
Step 3 − In the JavaScript code, use the getElementById() method to select the button and image elements.
Step 4 − Use the addEventListener method to attach a click event listener to the button element.
Step 5 − In the event listener function, use the style.display property of the image element to change its value from "none" to "block". This will make the image visible.
By following these steps, you can create a simple image gallery or slideshow that allows users to show and hide images by clicking on a button or other element in the user interface
Example
Here's an example of how you might do this:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h2>Showing image with a click in JavaScript</h2>
<button id="show-image-button">Show Image</button>
<img id="my-image" src="https://www.tutorialspoint.com/static/images/logo-color.png" style="display: none;">
<script>
const showImageButton = document.getElementById("show-image-button");
const myImage = document.getElementById("my-image");
showImageButton.addEventListener("click", () => {
myImage.style.display = "block";
});
</script>
</body>
</html>
In this example, the HTML file defines a button and an image. The image is initially hidden by setting the display property of the style object to "none". The JavaScript code uses the addEventListener() method to attach a click event listener to the button, and the event listener function shows the image by setting the display property to "block". When the button is clicked, the image will be displayed.
You can customize this behavior as needed depending on your specific requirements. For example, you might want to show multiple images or toggle the visibility of the image when the button is clicked. You can also use other methods to show and hide the image, such as using the visibility property or adding and removing a class that applies the appropriate styling.
Approach 2: Using the classList.toggle Method
This approach allows you to use CSS classes to control the visibility of the image, which can be useful if you want to apply other styles or animations to the image when it is shown or hidden. You can customize the behavior as needed by adding or modifying the CSS classes and by adjusting the logic in the event listener function.
Syntax
Following is the syntax to use classList.toggle method to show image with aclick in JavaScript −
myImage.classList.toggle("visible");
Here myImage is set to visible.
Example
In the example below, we show images with a click using classList.toggle method in JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Example </title>
</head>
<body>
<h1>Showing image with a click in JavaScript</h1>
<button id="show-image-button">Show Image</button>
<img id="my-image" src="https://www.tutorialspoint.com/javascript/images/javascript.jpg" class="hidden">
<style>
.hidden { display: none; }
.visible { display: block; }
</style>
<script>
const showImageButton = document.getElementById("show-image-button");
const myImage = document.getElementById("my-image");
showImageButton.addEventListener("click", () => {
myImage.classList.toggle("visible");
});
</script>
</body>
</html>
In this example, the HTML file defines a button and an image, and the image is initially hidden using a CSS class called hidden. The JavaScript code uses the addEventListener() method to attach a click event listener to the button, and the event listener function toggles the visibility of the image by using the classList.toggle() method to add or remove the visible class. When the button is clicked, the visible class will be added to the image, causing it to be displayed. If the button is clicked again, the visible class will be removed, causing the image to be hidden again.
Approach 3: Using Hidden Attribute
This approach is simple and easy to use, and it allows you to control the visibility of the image using a standard HTML attribute. You can customize the behavior as needed by adjusting the logic in the event listener function.
Syntax
Following is the syntax to show an image using hidden attribute:
myImage.hidden = !myImage.hidden;
Here the hidden attribute of myImage is set to true.
Example
In this example we show image with a click using hidden attribute of the image in JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h2>Showing image with a click in JavaScript</h2>
<button id="show-image-button">Show Image</button>
<img id="my-image" src="https://www.tutorialspoint.com/static/images/logo-color.png" hidden>
<script>
const showImageButton = document.getElementById("show-image-button");
const myImage = document.getElementById("my-image");
showImageButton.addEventListener("click", () => {
myImage.hidden = !myImage.hidden;
});
</script>
</body>
</html>
In this example, the HTML file defines a button and an image, and the image is initially hidden using the hidden attribute. The JavaScript code uses the addEventListener() method to attach a click event listener to the button, and the event listener function toggles the visibility of the image by using the hidden attribute to show or hide the image. When the button is clicked, the hidden attribute will be set to false, causing the image to be displayed. If the button is clicked again, the hidden attribute will be set to true, causing the image to be hidden again.
Note that the hidden attribute is supported in modern browsers, but it may not be supported in older browsers. If you need to support older browsers, you might want to use one of the other approaches that I mentioned earlier, such as using the style.display property or CSS classes.
29K+ Views
To Continue Learning Please Login