3

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?

Hamster
  • 2,962
  • 7
  • 27
  • 38
  • 1
    Any chance of example code? I think it would be easier to fiddle with this if there was something to play around with. – thirtydot Dec 27 '10 at 05:09
  • Actually, I just now developed a solution. I guess I'll just post it as my own answer. :P – Hamster Dec 27 '10 at 08:31

1 Answers1

3

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.

Hamster
  • 2,962
  • 7
  • 27
  • 38