origen — 2011-05-29T17:11:55-04:00 — #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
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,
dresden_phoenix — 2011-05-30T01:11:08-04:00 — #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.
paulob — 2011-05-30T06:44:24-04:00 — #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.
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](http://www.alistapart.com/articles/sprites/).