Non Rectangular CSS Image Links

Question

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 background image and absolute positioned links using CSS with image sprite rollovers.

However, I have now been presented with another image and the hotspots are not square, but irregular shapes. In one example they are similar to surfboards. Any ideas how I can get the links to respond to only the actual bounding box of the image. There are also instances where the 'hotspots' are parallelogram shaped and butted up next to each other.

Creating rectangular images in this instance just doesn't achieve the results required.

I think imagemaps might be a solution, but I want explore all alternatives first.

Hope this makes sense.

Answer 1

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.

Answer 2

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.

Answer 3

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.