Mapping background-image of element

Question

I know we have <map> and <area> for mapping an image. I want to use polygon mode of this.

But just imagine I have a div element with a background-image and I want to map the background image like <img>.

My shape isn't rectangle or square; it's a polygon. And I don't want to use transparent div trick.

How can I map this?

Answer 1

Use a transparent image (e.g. with opacity:0) with an imagemaps, positioned over your div. This effect is how the ImageMapster plugin works.

I wrote a blog post that explains how these effects work. The long and short of it is, you can use HTML image maps on top of anything you want. All you need to do is to ensure that the img has the highest z-index, and is transparent, and is positioned absolutely on top of the element you want your end-user to actually see. If it's transparent, the end-user will only see what's behind it, giving you total flexibility to use the polygon position tracking capabilities of imagemaps on to of any other kind of elementsuch as a div.

Example:

<div id="container">
    <img style="position: absolute; top: 0; left: 0; opacity: 0; 
                width: 100px; height: 100px;" 
         src="/placeholder.jpg" 
         usemap="#my-image-map">
    <div style="position: absolute; top: 0; left:0; 
                background-image: url(/some-100-by-100-pixel-image.jpg)">
</div>