Overlapping images with image maps interfere with each other

Question

information:

• Images have large transparent sections, so each of them must be overlapped to create the desired effect. In particular, the clickable parts of each image are in strange trapezoid shapes that should be pressed against each other.
• Images have image cards with large parts that overlap with the transparent parts of other nearby (trapezoidal) images. I do not expect any change in z indices to solve this ...
• Combining image files into a larger single one to overlay one image card for each section seems less ideal, especially since I may need to re-order or rename them later and so on. Ignore the animation and other features in the future.

What would be the best solution?

Answer 1

Well, after much deliberation, I think I found a solution: I just took a transparent gif 1px, scaled it to cover the entire area (with a higher z index, of course), and then displayed an image to display polygons inside that. Seems to work.