Search code examples
htmlimageimagemap

Overlapping images w/ image maps obstructing each other


Information:

  • The images have large transparent sections, so each must be overlapped to create the needed effect. Specifically, the clickable portions of each image are in weird trapezoid shapes meant to be pressed up against each other.
  • Images have image maps with large portions being overlapped by the transparent portions of other nearby (trapezoid) images. I don't expect any change in z indexes will solve this...
  • Combining the image files into a larger single one to overlay a single image map for each section seems less than ideal, especially since I may need to re-order or rename them later and such. Never mind hover animations and other possibilities down the road.

What would be the best workaround?


Solution

  • Alright, after much tinkering I think I've found a solution: I just took a 1px transparent gif, scaled it up to cover the whole area (with a higher z-index, of course), and then mapped the image map polygons within that. Seems to work.