html - How using usemap in div background url

Question

i missed you can you help me? i have such style

.lorry{
    background: url(../img/lorry.png);background-repeat:no-repeat;
    _background: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/lorry.png');
    height: 143px;
    width: 385px;
    float: left;
    margin: 39px 0 0 0;
}

I want to add usemap on image, is it possible?

Answer 1

You can't put an imagemap in a background. If you need this functionality you will have to layer objects to achieve the same thing:

• First layer: just your image (not bound to imagemap)
• Second layer: the contents of the container that you want to appear over the "background"
• Third layer: another copy of the image bound to the image map, but transparent.

Here's an example: http://jsfiddle.net/jamietre/fgeee/1/

Below is the general construct to achieve this effect. It works by having an imagemap on the topmost layer (so it will be active), but bound to a transparent image. The actual image you see is behind everything, and is not transparent.

You can also do this with two layers by skipping the first image, and assigning it as a background to the layer2 div. This will only work if you are going to display the image at its native resolution, so may be fine, but this answer is more general purpose.

<div id="wrapper">
    <img id="layer1" src="some/image.jpg">
    <div id="layer2" style="position: absolute; top: 0; left: 0;">
         Your content here
    </div>
    <img id="layer3" 
      style="position: absolute; top: 0; left: 0; opacity:0; *filter: Alpha(opacity=0);" 
      usemap="#your-map" src="some/image.jpg">
</div>

Notes:

• The wrapper is required to make the absolute positioning work
• the *filter: .. css is to supporter IE <8 which doesn't understand opacity.