Clicking through images with interactive map/area

Question

I have a transparent PNG and want to capture clicks using map and area elements. Because I need the area below the transparent part to be clickable as well, I did the following:

img{
  position: relative;
  pointer-events: none;
}
map, area{
  pointer-events: auto;
}

However, this makes the browser also ignore pointer events on the associated map. How can I fix that?

https://codepen.io/kslstn/full/jYZVmV

Note that in the Codepen, the image is not transparent, but I noticed no difference with transparent images.

Background: I'm making a 3D floor plan with floors that non-rectangular shapes. Here's an example of that setup with rectangular floors.

_“Is it possible to make the browser ignore only the transparent part of the image”_ - no, not really. Mouse interaction does not depend on what _you_ can “see”, but simply on the shape of the element - and for your JPEG images, that is just a plain old rectangle. You could perhaps _calculate_ when a click would have to “go through” a layer (mousemove event handler, checking the coordinates), and switch `pointer-events` on and off dynamically for the relevant elements ... not sure how well that would work though. It might make (much) more sense to implement this in SVG. — CBroe, Jan 09 '18 at 10:40
SVG elements are still rectangular boxes in HTML, just like my PNGs. The floor plans are too complex to add pointer behavior for all SVG elements as suggested in this answer: https://stackoverflow.com/questions/12905808/how-to-make-an-svg-text-element-click-through-able — kslstn, Jan 09 '18 at 10:43
“Is it possible to make the browser ignore only the transparent part of the image” - no, not really. Mouse interaction does not depend on what you can “see”, but simply on the shape of the element " I am painfully aware of this, hence my mucking around with map and area :) — kslstn, Jan 09 '18 at 10:44
I heavily edited the question to make it more to the point, leaving out the floor plan stuff, but mentioning it to make the comments above not look crazy. — kslstn, Jan 09 '18 at 11:31

score 0 · Answer 1 · answered Jan 09 '18 at 10:20

0

Maybe I'm not seeing the whole picture because your code snippet is different from your example, but, instead of using a map tag, have you tried:

using the click event on your image;
adding an "a" tag wrapper to the image and using the click event on that;
adding an empty "a" tag with the event and styling it thus:

display:block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;

*your "floors" should be relative for this

answered Jan 09 '18 at 10:20

Alexandru Nicolae

1
1

Unlike in the example the image has a non-rectangular shape, so that does not work. – kslstn Jan 09 '18 at 10:45
another thought: css pointer-events: all/none according to what you want clicked/ignored – Alexandru Nicolae Mar 13 '18 at 10:56

score 0 · Accepted Answer · answered Jan 09 '18 at 11:51

Thanks to CBroe's comments, I could solve this by adding an SVG instead of an image map: https://codepen.io/kslstn/pen/ypvVGP. It is not a real solution to the issue though: using map and area for what I think they are intended.

<div class="underneath" onclick="console.log('I am behind the image.');">
  I receive clicks through the image. I shouldn't receive clicks through the circular area on the image, but I do. Open the console to see how the clicks are processed.
</div>

<img src="http://placehold.it/200x200" alt="200 x 200 pic" onclick="console.log('You shouldn't see this in the console, because I don't have pointer events.');">

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" onclick="console.log('I am the circle');">
  <circle cx="100" cy="100" r="100"/ >
</svg>

Clicking through images with interactive map/area

2 Answers2