SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    0 Post(s)
    0 Thread(s)

    CSS polygonal image map rollovers, help!

    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,


  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Madison, WI
    34 Post(s)
    2 Thread(s)
    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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    182 Post(s)
    6 Thread(s)
    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 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 this example.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts