How best to code a client-side image map with rollovers?

December 29, 2005 3:43 PM

What's the best way to do a client-side image map w/added rollover goodness?

I want to add a clickable world map to my blog. The map is divvied up into 12 regions (North America, South America, etc.) which I want to each light up when rolled over. I've got the map w/rollovers done in Photoshop; what's the best way to implement this on my website? Some sort of HTML/CSS magic?

posted by docgonzo to computers & internet (4 answers total)

Not magic, just absolutely positioned display:block links! More information at this ALA article.
posted by charmston at 3:47 PM on December 29, 2005

My mistake; that was the example, not the article. The article is located here.
posted by charmston at 3:47 PM on December 29, 2005

Charmston, that's a clever way of doing it. Much cleaner than the old way of stiching the images together in a table. :-p
posted by arrhn at 5:50 PM on December 29, 2005

Not only is it more clever, but it is also standards-compliant, completely accessible (in devices such as screen-readers used by deaf people, cell-phone browsers, and even old versions of modern browsers), and it handles the rollovers without the use of any scripting language such as javascript!
posted by charmston at 9:07 PM on December 29, 2005