[JavaScript] Img onclick | Frontendscript

Image onclick

The 'onclick' method is a great tool for incorporating interactivity into images. You may improve user experience by allowing actions that are triggered when users click on an image using this way. This article will go through how to use the onclick technique to generate interactive pictures.

The 'onclick' method is a JavaScript event handler that is applied to HTML elements, such as images, to execute a specified action when the element is clicked. It allows you to define a JavaScript function or code snippet that will run when the image is clicked.

This can be used to trigger a wide range of actions, from opening pop-ups to toggling additional content or even navigating to a new page.

The onclick Event in JavaScript

When an image with the specified “onclick” attribute is clicked by the user, the JavaScript function defined in the “onclick” attribute will be executed.

To get onclick event functionality in JavaScript, we must first write a function and then call it within the onclick, which is present on the image tag within the HTML. We’ve taken an image here, and when a user clicks on it, an alert message is generated. This will be demonstrated in the following example.

<!DOCTYPE html>
<html>
<head>
title>Image onclick Example</title>
</head>
<body>
<h1>Click the image below:</h1>
<img src="download.jpg " alt="" width="500" height="300" onclick="showmessage()">
<script>
function showmessage() {
alert('You clicked the image!');
}
</script>
</body>
</html>

If you run the above code, this is how it will look like in the web browser.

If you run the above code inside the web browser and click on the image, the image will show the alert message, as shown below.

The HTML document contains an 'img' tag with the 'src' attribute pointing to an image file.
The 'alt' attribute provides alternative text for the image.
The 'onclick' attribute is set to “showmessage()”, which means the 'showmessage()' function will be triggered when the image is clicked.
Inside the script tag, the 'showmessage()' function is defined to display an alert with the message “You clicked the image!”.

Caution: Use “onclick” event with caution on parts that need significant actions, such as form submissions or damaging activities. Make sure the event doesn’t affect how your web application should behave.

Alternative uses of onclick event for Visual Effects

Another manner to use the “onclick” event is to trade the image source or modify CSS residences to provide visual effects when the image is clicked. For example, you may modify the image with a exceptional one or toggle a class to use a selected style.

1. Changing Image Source on Click

In this approach, we’ll dynamically change the image source to enhance the user experience.

<!DOCTYPE html>
<html>
<head>
<title>Image Swap Example</title> <style>
/* CSS to give some styling to the image */
img {
width: 200px;
border: 2px solid #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Click the image to change it:</h1>
<img id="image" src="download.jpg" onclick="changeImage()>
<script>
function changeImage() {
var imageElement = document.getElementById("image");
if (imageElement.src.endsWith("download.jpg")) {
imageElement.src = "images.jpg" ;
} else {
imageElement.src = "download.jpg";
}
}</script>
</body>
</html>

First off, we have defined an image element with the id = " image", which permits us to effortlessly enter and modify it after the usage of JavaScript.
The 'style' tag contains CSS tag that provide some simple styling to the image, which include a border and a pointer cursor to signify interactivity.
We’ve got an “onclick” characteristic inside the image tag that calls the JavaScript feature changeImage() while the image is clicked.
In the JavaScript feature 'changeImage()' , we first retrieve the photo element using 'document.GetElementById(" image")' .
Subsequent, we check the cutting-edge source of the image the use of the '.src' property. If the supply ends with”image1.Jpg”, we alternate it to”image2.Jpg”, and vice versa.
As a result, when the user clicks on the photo, it will toggle among two special images, creating a visible impact

FAQ
Q: Can I attach the onclick event to elements other than images?
A: Yes, you can use the “onclick” event on various HTML elements, such as buttons, divs, and links. It allows you to trigger JavaScript functions when those elements are clicked.

2. CSS Property Modification on Click

Aside from changing the picture source, you can likewise utilize the “onclick” occasion to apply various styles to the image when it’s clicked. You can, for instance, toggle a class on the image, and the class can have various CSS rules that change how it looks.

<!DOCTYPE html>
<html>
<head>
<title>Image Style Toggle Example</title> <style>
/* CSS for default and clicked states  */
default-image {
width: 200px;
border: 2px solid #ccc;
cursor: pointer; 
} 
.clicked-image {
border: 2px solid #f00;
box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}
</style>
</head>
<body>
<h1>Click the image to apply a style:</h1>
<img id="image" src="download.jpg" class="default-image" onclick="toggleStyle()">
<script>
function toggleStyle() {
var imageElement = document.getElementById("image");
imageElement.classList.toggle("clicked-image");
}</script>
</body>
</html>

In this example, two CSS classes are defined: '.default-image' and '.clicked-image'. The '.default-image' class addresses the underlying style of the image, and the '.clicked-image' class addresses the style when the image is clicked. When the onclick attribute in the image tags is clicked, the JavaScript function 'toggleStyle()' is called. Inside the 'toggleStyle()' function, we retrieve the image element utilizing 'document.getElementById("image")'. The “clicked-image” class can be added or removed from an image by utilizing the '.classList.toggle()' method. The class is switched by this method; If it is there, it takes it out, and if it isn’t there, it adds it. Consequently, the image will apply the “clicked-image” class when the user clicks on it, changing the color of the border and adding a box shadow to create a visual effect. These alternative strategies demonstarte how the “onclick” event can be utilized to make dynamic and drawing in special visualizations by adjusting the picture source or applying various styles to the image when the user interacts with it.

References

For more reference, please use below links:

HTML Living Standard:
https://html.spec.whatwg.org/multipage/

Post Views: 1,836