How can map tags be used for two images that overlap?

Question

We have two images with transparent sections that each have a map and separately they work fine. When the images are overlapped using css position relative and absolute only the top map seems to work. Is there some way to make both maps work? Edit: We are only concerned with working in Mozilla and the w3 standard so no IE workarounds are needed.

Accepted Answer

This is by design. According to the HTML 4.01 spec, section 13.6.1 ("Client-side image maps: the MAP and AREA elements"):

"If two or more defined regions overlap, the region-defining element that appears earliest in the document takes precedence (i.e., responds to user input)."

Source

Note for those who come hereafter looking for an answer to the same question: This answer does not address the issue of overlapping images. See the comments.

How can map tags be used for two images that overlap?

Solution

Problem