How to ignore mouse interaction on overlay image using JavaScript ?
Ignoring mouse interaction on overlay images can be controlled by a CSS property namely pointer-events. It is a property that defines if an element of the page will react to the pointer-events.
Syntax:
pointer-events: auto\none;
Example: The following example demonstrates the use of pointer-events property.
html
<!DOCTYPE html>
< html >
< head >
< title >CSS pointer events</ title >
< style >
.main {
position: relative;
width: 450px;
font: 25px Verdana;
}
.overlay {
position: absolute;
left: 0px;
top: 0;
width: 225px;
height: 225px;
}
.pointer-events-none {
pointer-events: none;
}
</ style >
< script >
window.onload = function () {
document.getElementById("enable-disable-pointer-events")
.onclick = function () {
document.getElementById("overlay")
.className = "overlay "
+ ((this.checked) ?
"pointer-events-none" : "");
};
};
</ script >
</ head >
< body >
< div class = "main" >
< img
src =
GeeksforGeeks: A computer
Science portal for Geeks.
< div id = "overlay" class = "overlay" ></ div >
< p >
< input id = "enable-disable-pointer-events"
type = "checkbox" >
< label for = "enable-disable-pointer-events" >
Disable pointer events for image
</ label >
</ p >
</ div >
</ body >
</ html >
|
Output:
Last Updated :
15 Feb, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...