Non Rectangular Css Image Links

I have the following requirement: A large image contains several 'hotspots' that need to link to other pages. Sounds simple. I have created a simple html page, a div with the backg

Solution 1:

HTML image maps are the way to go - they support arbitrary polygons, and are well understood by screen readers and suchlike.

You might be able to do something clever with SVG in modern browsers, but it's not going to work for the IE6 crowd.

Solution 2:

The alternative to HTML image maps are Css sprites as described in this a list apart article. Read the section under "irregular shapes".

It takes some work but the final HTML will be semantically more appealing (ie. to search engines) than with the standard image maps.

Solution 3:

As suggested by Richie's answer, you can use links in SVG too. The trick is to properly mix SVG with xlink. A quick solution would look like this:

<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <a xlink:href="https://stackoverflow.com/">
    <polygon points="200,10 250,190 160,210" style="fill:blue;stroke:black;stroke-width:2" />
  </a>
</svg>

If you click anywhere on the polygon, you will be directed to the stackoverflow main page. Clicking anywhere else will do nothing.