Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.5k views
in Technique[技术] by (71.8m points)

html - How using usemap in div background url

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...