Irregular shape image map - w/o canvas, SVG or Javascript

Question

How to make image map link area with background image in webpage like below? is the only way use canvas? any way to do it with pure css and cross browser?

Answer 1

The <area shape> attribute with defined coords will do the job. It may look complicated at first, however it is quite easy once you understand the shape constructs. Here is a sample JSFiddle: >>>CLICK HERE<<<

Here is the code:

HTML:

<div class="imagemap">
    <img src="http://i.imgur.com/T7OrXYW.png" alt="The Map" usemap="#mymap" />
    <map name="mymap" id="mymap">
        <area shape="poly" coords="6, 10, 280, 10, 144,157" href="http://www.aol.com" />
        <area shape="poly" coords="7, 20, 144, 167, 144, 288, 6, 288" href="http://www.yahoo.com" />
    </map>
</div>

CSS:

.imagemap img {
    width: 300px;
    height: 300px;
    border: 1px solid blue;
}

The coordinates tend to confuse people so I've included a diagram for you to match with the code. There are a total of three shapes you can use to determine you coordinates:

• Circle - A circle contains three coordinates (x, y, radius), the x and y coordinates define the center of the circle and the radius is distance (in pixels) from the center to the outermost part of the circle
• Rectangle - A rectangle contains four coordinates (x1, y1, x2, y2) the x1/y1 coordinates define the left/top corner of the rectangle and the x2/y2 coordinates define the right/bottom corner of the rectangle (in pixels)
• Polygon (both of your shapes required the use of a polygon shape construct) - A polygon contains an infinite number of coordinates that define each corner in your shape. In a triangle there are a total of three corners (or vertices) which requires six coordinates (x1, y1, x2, y2, x3, y3). (again in pixels)