HTML image map outside an image

I have to generate <map> and <area> elements on a web page containing many images. Each image would have to be linked to its appropriate <map> via usemap="#map1", usemap="#map2", etc...

As a nasty hack for this situation, I'd like to add one 1x1 absolutely positioned (top:0, left:0) <img> (the anchor-image). Then, I'd combine all the <area> tags into one <map> (the super-map), referenced by the anchor-image.

Trying this, the <area> tags defined in the super-map do not activate when I mouseover them (they are outside of the 1x1 anchor-image). I tried making anchor-image width:100%, height:100% and playing with its z-index (I still have to interact with the images on the page for other reaso开发者_运维技巧ns). Unfortunately, when the z-index makes the <area> elements clickable, it stops me from interacting with the images.

Any ideas on what else I can try? Thanks!

Can you elaborate on why you need so many maps? If you have a lot of images, why not split each one into a single action and simply place them in a tags?

Or, why not combine the images into a larger one and then have fewer maps?