Navigate through PNG image - proceed only if the clicked area is transparent

Question

Navigate through PNG image - proceed only if the clicked area is transparent

Imagine having an image that looks like this:

https://i.sstatic.net/Ab6aW.jpg

I am looking to make it so that when I click on the transparent areas of the image, the click should pass through to the element below. However, if I click on a non-transparent area, the image itself should receive the click event.

Is it possible to achieve this effect?

javascript html jquery css

Answer 1

Answer №1

To begin, create a temporary canvas.
Retrieve the click coordinates on the overlay image by clicking.
Use the retrieved coordinates to fill your canvas with the corresponding image data.
Check the Alpha channel data of the 1px image section from the canvas.
If the Alpha channel data is 0, then it's considered as transparent.
If the pixel is transparent, disable the pointerEvents and get the element underneath using Document.elementFromPoint
Then trigger a "click" event on that element.
Once done, revert back to normal "auto" pointerEvents for all overlays.

var ctx = document.createElement("canvas").getContext("2d");

$('#logo').on("mousedown", function(event) {

  // Get click coordinates
  var x = event.pageX - this.offsetLeft,
      y = event.pageY - this.offsetTop,
      w = ctx.canvas.width = this.width,
      h = ctx.canvas.height = this.height,
      alpha;

  // Draw image to canvas
  // and read Alpha channel value
  ctx.drawImage(this, 0, 0, w, h);
  alpha = ctx.getImageData(x, y, 1, 1).data[3]; // [0]R [1]G [2]B [3]A

  // If pixel is transparent, 
  // retrieve the element underneath and simulate its click event
  if( alpha===0 ) {
    this.style.pointerEvents = "none";
    $(document.elementFromPoint(event.clientX, event.clientY)).trigger("click");
    this.style.pointerEvents = "auto";
  } else {
    console.log("LOGO clicked!");
  }
});


$("#green").on("click", function(){
  console.log("Green image clicked!");
});

img{border:1px solid #000;}
img + img{position:absolute;top:0; left:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="green" src="//placehold.it/200x140/cf5">
<img id="logo"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4AAACeCAYAAADDhbN7AAAAGXRFWHRTb2Z0d2FyZQBB...
"

Answer 2

To begin, create a temporary canvas.
Retrieve the click coordinates on the overlay image by clicking.
Use the retrieved coordinates to fill your canvas with the corresponding image data.
Check the Alpha channel data of the 1px image section from the canvas.
If the Alpha channel data is 0, then it's considered as transparent.
If the pixel is transparent, disable the pointerEvents and get the element underneath using Document.elementFromPoint
Then trigger a "click" event on that element.
Once done, revert back to normal "auto" pointerEvents for all overlays.

var ctx = document.createElement("canvas").getContext("2d");

$('#logo').on("mousedown", function(event) {

  // Get click coordinates
  var x = event.pageX - this.offsetLeft,
      y = event.pageY - this.offsetTop,
      w = ctx.canvas.width = this.width,
      h = ctx.canvas.height = this.height,
      alpha;

  // Draw image to canvas
  // and read Alpha channel value
  ctx.drawImage(this, 0, 0, w, h);
  alpha = ctx.getImageData(x, y, 1, 1).data[3]; // [0]R [1]G [2]B [3]A

  // If pixel is transparent, 
  // retrieve the element underneath and simulate its click event
  if( alpha===0 ) {
    this.style.pointerEvents = "none";
    $(document.elementFromPoint(event.clientX, event.clientY)).trigger("click");
    this.style.pointerEvents = "auto";
  } else {
    console.log("LOGO clicked!");
  }
});


$("#green").on("click", function(){
  console.log("Green image clicked!");
});

img{border:1px solid #000;}
img + img{position:absolute;top:0; left:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="green" src="//placehold.it/200x140/cf5">
<img id="logo"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4AAACeCAYAAADDhbN7AAAAGXRFWHRTb2Z0d2FyZQBB...
"

Answer 3

Answer №2

If you want to only capture click events on the opaque area of an image, a simple solution is to use a map in HTML along with some JavaScript:

<img src="https://i.sstatic.net/Ab6aW.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area
  href="javascript:alert('You clicked on the image!')"
  shape="poly" 
  coords="193,148,50,193,254,292,461,191,302,141,332,99,285,27,220,16,170,89"
/>
</map>

(I found these coordinates using this helpful site.)

Answer 4

If you want to only capture click events on the opaque area of an image, a simple solution is to use a map in HTML along with some JavaScript:

<img src="https://i.sstatic.net/Ab6aW.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area
  href="javascript:alert('You clicked on the image!')"
  shape="poly" 
  coords="193,148,50,193,254,292,461,191,302,141,332,99,285,27,220,16,170,89"
/>
</map>

(I found these coordinates using this helpful site.)

Navigate through PNG image - proceed only if the clicked area is transparent

Answer №1

Answer №2

Similar questions

Embedded script displayed as textual content

Creating a new row does not result in the creation of a new span displaying the character count message

After the page loads, the Facebook Like button causes my website content to shift downwards by 1 pixel

React Native / Redux - The "Cannot update during an existing state transition" error occurs when attempting to update

The placement of the React.js/Next.js Loader is incorrect on the page

Leveraging CamanJS for canvas filtering

Delete the div element upon clicking the .close button

What does the error message "TypeError: Bad argument TypeError" in Node's Child Process Spawn mean?

Utilize String to Set Cookies

What is the best way to pass a function as a prop from a parent component to a child component and access it?

Patiently waiting for the component variable to be assigned through subscription

I'm experiencing difficulty in loading a static HTML page from the app file when using Node.js

Encountering a CORS error while trying to fetch a YouTube page in React

At what point does a dynamically loaded CSS file in the head section of a webpage actually

Button with opaque background over a see-through backdrop

Getting the most out of jQuery DataTables column sizing

What is the best way to configure my Express API endpoint so that it can generate customized responses based on the parameters in the URL?

"Angularjs tip: If the value of the href attribute is null, make sure

Menu options are unresponsive to clicks in the dropdown

Click on the navigation bar buttons to toggle between different divs and display multiple information boxes simultaneously