SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2005
    0 Post(s)
    0 Thread(s)

    Region Specific Image Rollover

    For the first time in a long time, I've encountered a project with a single image that has many regions. Each region is a polygon, and will bind to a unique rollover event. That rollover event will pull back data for each region. For the past few days, I've been brainstorming ways to pull this off.

    I've thought of using a hidden image in a canvas with a black background, and a different color foreground for each region. Then, mapping the color the proper region data on the backend.

    I've thought of passing a huge Javascript object with keys that relate to a position in the image, and values that define the region data.

    Initially, I dismissed the idea of a good, old-fashioned image map, in an attempt to find something sleeker and sexier. But perhaps this is the best solution?

    Would love to hear your thoughts on this...


  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    1 Post(s)
    0 Thread(s)
    This is a total cheat, and probably not feasible with the image size, but one technique would be to set up the image map, and then use JavaScript to swap out the src of the <img>. You'd have to store each rollover state as its own image, though... In retrospect, not such a good idea.

    I'm just not a fan of recreating browser features. You're trying to build an image map, so why not just build an image map? Stupid rollovers.
    I'm the web overlord for Graphic Business Systems


Posting Permissions

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