0

Picture a base JPG image with a bunch of transparent PNG images superimposed. These are a bunch of irregular and non-overlapping shapes.

<img src='base_image.jpg'>
<img src='shape1.png' class='overlay'>
<img src='shape2.png' class='overlay'>
<img src='shape3.png' class='overlay'>

On a mouseover, how could I figure out which (if any) of the transparent images is not transparent at the mouse position? Would ultimately want something like 'shape2.png' or 'none' as a response. Is the response "there's no way" from 10 years ago still true? How can I make concentric circles in HTML respond to mouseOver properly?

Pollux
  • 31
  • 8
  • 1
    Use canvas to parse the images – John Dec 23 '20 at 13:46
  • 2
    You could [get the pixels using a canvas](https://stackoverflow.com/questions/9429882/read-image-pixels) and read their RGBA values. If the pixel you're hovering over has an A value of 0, it's transparent. – Liftoff Dec 23 '20 at 13:46
  • I figured I might have to delve into canvas, but know virtually nothing about it now. How could I then get back to which image was non-transparent at that location? Is there some metadata I could place when adding a transparent image into a canvas to get back to it? – Pollux Dec 23 '20 at 14:02
  • Put each image into its own canvas. You need to find the mouse position then go down through the canvases, in the right stacking order, til you hit a pixel with a non zero opacity, or you run out of canvases. – A Haworth Dec 23 '20 at 18:34

0 Answers0