CSS polygonal image map rollovers, help!

HTML & CSS
1

Hi again sitepoint masters,

I’m trying to complete a splash page with rather complicated rollover areas.
I don’t have anything online, but the images should suffice.


this would be the area as it initially appears onscreen


this would be the rollover, and now it is a link.

I’m aware that DW has a polygonal link area map tool, but it doesn’t necessarily handle rollovers. Is there a simpler method without using the maps?

Would something like this work

a:hover {
background-image: url(“…polygon_rollover.png”)

There are 8 of these polygonal links. What am I looking at, spans? creating a class for each one?

Thanks in advance on this simple question,

ori

2

The markup will not change ( you will need 8 links and 8 IDs for each of the 8 bgs with individual graphics for each ( you can make a sprite, you you will still ahve to custom raw each state into it…) but you will need to positioning like a jigsaw puzzle. The tricky part will be the way you overlap them, as you really cant map an anchor… all the click able area remains be rectangular.

3

As dresden said CSS can only do rectangular shapes and so you would need loads of little rectangles laid out to match the image shape.

It’s probably easier to use something like this jquery plugin that takes a normal image map and converts it to a rollover. In this was you can get non rectangular shapes. (or perhaps using the [URL=“http://raphaeljs.com/australia.html”]raphael javascript library but is a little more complex.)

There is an html/css method but it is only supported in Firefox and Opera unfortunately.

If you don’t need to follows the edge that precisely you could use sprites as in [URL=“http://www.alistapart.com/d/sprites/ala-blobs2.html”]this example.