here is the link
online image map tool – html & css

1. For accessibility, you shouldn’t use visibility:none (or display:none if you considered that) to hide the text here, as an element styled with visibility: hidden will not be read by screen readers (those that follow spec).

Instead, use a more robust image replacement technique. I suggest either the Phark method or Gilder/Levin – those are just the better documented names to google to find the basic techniques. I prefer G/L as it also works with CSS enabled but images are turned off.

2. While I don’t see it breaking (using FF3), your implementation of positioning also has inherent risks. An absolutely positioned element is positioned relative to its closest positioned parent. Basically, you’d want to explicitly set a positioning context by applying ‘position:relative’ to #subscription. Then the children (the positioned links) can be positioned within that parent. This method helps ensure more reliable results across browsers.

Also, you should then use the positioning declarations of “top: x” and “left: x” (where x is the offset value, say in px) rather than margins to handle that positioning. Again, I don’t necessarily see it breaking the way you have it, but top and left are meant for this so why not use them? Plus you’ve got floats and margins set on the same element, which under specific conditions cause the “double margin” bug in IE6 (did you test this there?) – while there is a fix, you avoid that issue entirely by using top and left instead of margins for positioning in this case.

3. Finally, why not use a semantically sound unordered list for these links instead of the meaningless div?

Sorry for droning on… I just like to share, b/c I know from experience how there are many different ways to use CSS to get a desired result, but some ways certainly do work better (more reliable, cross-browser) than others. HTH.

As long as the regions are rectangular, you can build out hotspots as complicated as you’d like!

Doug

If you view my site, click on links to the left and you’ll see the image I’m trying to use as an image map (under the Text alphabet).

Basically, trying to use the Image to go to each section of this list by letter.

Evidentally, I spent 20 minutes building a map with GIMP, and then WP removes the map tags, so that’s how I found your site.

Though, may contemplate using Flash

Thanks.

it seems that the image map and the links are two different things, they dont work together like how an image map in html does

when i include background positioning (center left) for the image map, the positioning of the links doesnt follow up.

any way to get around this? im very amateur. thank you.