Image Maps in CSS?

Hello. I'm a first time poster and also still wet behind the ears as far as CSS goes. I would like to know if there is a way to insert image map coordinates into a style sheet so I do not have to repeat those image map coordinates on each html page.

Here's my sample that I'm working with:

URL

So I have one image (which I know I have to put on the html page, because CSS only allows background images), and then all these hotspots on the image that form the map + coordinates.

If there is a way to put all those coordinates over into an external style sheet, I'll be ... ecstatic. If there's not a way, then I'll abandon this idea and move on!

Much thanks in advance,
san antone rose

Once again, a list apart comes to the rescue.
http://www.alistapart.com/articles/imagemap/

You can have CSS imagemaps by having defined areas which are links of fixed size. This shows a quick setup (background represents image, and borders outline link areas), which I tested in Mozilla 0.8, IE6, and Opera 7.

Thanks! That's a great article in A List Apart. I'm guessing then that I could put my image map elements into the style sheet, then link to my javascript rollovers from the style sheet? Or would I be relying too much on externals?

I'm trying to find a balance between coding on html pages v. using external controls (where things can be easily changed) v. accessibility issues.

Would anyone else out there recommend using the css image map technique?

Thanks so much.
san antone rose

Generally, from an accessibility angle, image maps are not a Good Thing™. Mobility impaired folks might have difficulty with a mouse, so you must make tabbed focus very obvious. Visually impaired folks, using most assistive technology UAs, will "see" a linearized version of your page. The image map will be seen as a link to the image map links. Look at your page in Lynx for an idea of what's happening.

My own philosophy is that no essential functionality should depend on client side scripting, images, css, or plug-ins. You can put tartar sauce on the fish, but the fish had better be edible without it.

cheers,

gary

I agree, but would also propose that this is a reason to promote the use of CSS-based imagemaps over traditional HTML-only versions. Since they are made up of normal anchor tags with a simple div around them they are processed by accessibility devices without any need for special code. If you are wishing to use an imagemap on your site, this is a better way to go.

If you use an anchor tag without content, Lynx just won't show them. I try to have 'plain text' links at the bottom of my pages, regardless of the styling of the top links.

(Hint: There are Lynx browsers that will run on Windows, but if you don't have easy access, then use FireFox/Mozilla and view pages with no styling.)

I do agree with this. Nothing annoys me more than a site that requires java/activeX, javascript, and images in order to view/navigate it. Everything should always degrade gracefully when stripped of the 'fluff'. But fluff is nice to add when you have all that.