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

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.