How to set image map in a portion of the background image?

问题

I know how to set image map for foreground image.But this time I want set image map for a portion of the image,which is set as the background image of a div.How can I do this.I have searched a lot in the web,couldn't got a solution.Please help.For example,

html

<div class="header full" style="background:url('/hdr.jpg';?>) no-repeat; height:492px">

The entire image is set as background image,I want to click the Nestle oval portion and will get redirected to some url.

回答1:

Please try following code
Use your image and rename as test.jpg please put all are in same folder for testing and change code for your needs (this is just an example)

**CSS** (style.css)



.image{
   background: url("test.jpg") repeat scroll 0 0 transparent;
   height: 185px;
   width: 266px;
   border: 1px solid;
   }
    .link{
        padding-left: 26px;
        padding-top: 23px;
        position: absolute;
    }
    .link a{
      padding-left: 0;
      display: block;
      height: 48px;
      width: 67px;
    }
    .container{
    position: relative;
    }

HTML

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="link"> <a href="">&nbsp;</a></div>
<div class="image">
</div>
</div>

回答2:

Here's an example with explanation: http://quackit.com/html/tutorial/html_image_maps.cfm

回答3:

okay you put image as background because of their is now no such element in the div to click

If you only need the "rectangle" shape for the links in the image map, you could use css defined link positions instead. This is accomplished by specifying the position and setting the background-color to transparent. Here is an example

来源：https://stackoverflow.com/questions/15199423/how-to-set-image-map-in-a-portion-of-the-background-image

标签

php

html

css

imagemap