How to use tags for two images that overlap?

Question

We have two images with transparent sections, each of which has a map, and individually they work fine. When the images overlap using the css position, relative and absolute, only the top map seems to work. Is there a way to make both cards work?

Edit: We only care about working in Mozilla and the w3 standard, so IE workarounds are not required.

Answer 1

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

"If two or more specific areas are overlapping, the area-defining element that appears earlier in the document takes precedence (that is, user input responds).

A source

Note for those who further seek the answer to the same question: this answer does not address the problem of image overlap. See Comments.