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.

Answer 2

I just come up here because I was trying do the same, and I found one one to use "map" without image.

As the other folks said, isn't possible use maps without image, but we can use DIV instead.

What you do is, you place a div over the main image and create a link for that DIV, below follows my code:

HTML

<div id="progress"> 
   <a id="link1" title="Symbol Link" href="#">Symbol Link</a>
   <a id="link2" title="Stack Link" href="#">Stack Link</a>
   <a id="link3" title="Overflow Link" href="#">Overflow Link</a>
</div>

CSS

#progress {
    width: 257px;
    height: 84px;
    background:url(http://upload.wikimedia.org/wikipedia/en/9/95/Stack_Overflow_website_logo.png);
    position:relative;
}
a#link1, a#link2, a#link3 {
    display: block;
    overflow: hidden;
    position: absolute;   
    background: transparent;
    text-indent: -9999px; 
}
#link1 {
    left: 10px;
    width: 45px;
    height: 84px;

}
#link2 {
    left: 55px;
    top: 45px;
    width: 70px;
    height: 39px;    
}
#link3 {
    top: 45px;
    left: 124px;
    width: 130px;
    height: 39px;    
}

jsFiddle of my example.

Reference: CSS image maps