11 Non-rectangular Hit Areas

Is there any way to give chunks of a CSS imagemap non-rectangular, polygonal hit areas? I haven’t heard of one, and I’d imagine that’s a huge roadblock for this technique.

posted at 11:16 am on December 12, 2003 by Tim Brown

12 Not really better

I really don’t think this technique is better in general as a replacement for the imagemap, which has rather a lot of accessibility options that few people seem to know about.

http://joeclark.org/book/sashay/serialization/Chapter08.html#h2-6590

And you don’t have to reproduce the imagemap links in plain text under WCAG, unless they’re server-side, which nobody uses.

http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-client-side-maps

Admittedly, the example given positions its links very far apart, so maybe we would have used what, two imagemaps?

How’s that hurting anybody?

I don’t know of any modern screen readers that cannot handle imagemaps. And authors should be using the map element a bit more anyway. Did you know you can put any block-level elements you want inside of it?

http://www.htmlhelp.com/reference/html40/special/map.html

The method given in the article here is not actually bad, it’s just not better in many cases.

posted at 11:57 am on December 12, 2003 by Joe Clark

13 Here's why...

On my site, I need to display a layout of my woodworking shop (http://www.freedommind.com/woodworking/). I wanted to be able to have the tools and other spots clickable, but be able to change them whenever I chose.

At this time, the only clickable areas are points from which I’ve taken photos. Since I didn’t want them to obscure the layout, they’re hidden by default. There’s a basic javascript that displays/hides them.

I’m in the process of moving all my tools into the shop and once they’re in place, I’ll update the page by adding links to photos and information about the individual tools.

To do this any other way would have been much more burdensome.

posted at 03:38 pm on December 12, 2003 by Chuck Bradley

14 Here's why... (oops)

Link should have been http://www.freedommind.com/woodworking/layout.html. Sorry.

posted at 03:40 pm on December 12, 2003 by Chuck Bradley

15 Here's why... (argh!)

No period at the end this time: http://www.freedommind.com/woodworking/layout.html

posted at 03:41 pm on December 12, 2003 by Chuck Bradley

16 Can't use this stuff for everything

Have a look at http://www.lmm.ru/ and you’ll see why I think the technique described is nearly useless.

posted at 06:09 pm on December 12, 2003 by Alexander Savenkov

17 perfect for screen readers

about the image map technique “It works in all browsers, even Lynx”

and this doesn’t? I believe this to be a better technique over ol’image maps, because of the simple seperation of content and presentation. Lynx will see the links just fine!

Love the article!

posted at 06:17 pm on December 12, 2003 by Serge 'Corny' Melis

18 interesting concept

I was quite surprised to load up the new ALA tonight and see the new issue be about imagemaps of all things. It was pretty ironic given that I was just wondering what had ever happened to their usage; and wondering the ramifications of using them in this new world of web standards we’re living in (i.e. we all started splitting images into tables for a while. Now that we’ve ruled that out, are imagemaps viable?)

This is a really cool concept technique and it should do well to quiet those who stand against the forces of web standards wanting their pixel perfect layouts. :-P

posted at 06:21 pm on December 12, 2003 by Brian Crescimanno

19 another example

Chuck, I did something similar a while ago:

http://www.kfo-weiss.de/rundgang/index.html

I like this method because it gives you so much control while keeping the html itself light.

posted at 06:48 pm on December 12, 2003 by Levin

20 slow connections...

…would be glad if the rollover images could be pre-loaded. it would prolongue the initial loading time by only a couple of seconds and avoid that one second hesitation for the first time you rollover each image.

posted at 12:10 am on December 13, 2003 by . csant .