[thelist] turn the cursor into an arrow on an <area> with an href

James Aylard webmaster at equilon-mrc.com
Mon Jul 23 13:12:02 CDT 2001


Sam-I-Am,

> I just did a test and I'm also stumped. { cursor: default } works fine
> for a regular (a) link, but not for an area.

    Unfortunately, IE doesn't support the CSS cursor property on the <area>
element. Your best alternative would be to slice your image map and use
standard anchor elements. If you can't do that, then you don't really have
many options.

> One thing to bear in mind about setting the cursor:
>  cursor: hand; /* works wonderfully in IE, not in NN6 */
>  cursor: pointer; /* works wonderfully in NN6, not in IE */
>
> does anyone know a workaround for this? I just can't seem to find a
> common ground for this one. (without browser sniffing and delivering 2
> stylesheets)

    Yes. The workaround is to put the cursor: pointer style declaration in a
second style element with a disabled attribute, e.g.:

<style type="text/css">
  <!--
    /* Both IE and Netscape will parse this */
    div { cursor: hand ; }
  -->
</style>
<style type="text/css" disabled="disabled">
  <!--
    /* IE will not parse this */
    div { cursor: pointer ; }
  -->
</style>

    Since the disabled attribute is Microsoft-proprietary, IE will ignore it
while Netscape will not. And since it follows the initial declaration, and
thus takes precedence, Netscape 6 will implement it.
    Of course, the disabled attribute won't validate. If you need it to
validate, you will have to use script to either disable the style element
or, probably more simply, to set the cursor attribute directly.
    IE 6 *does* support the cursor: pointer value, btw.

James Aylard





More information about the thelist mailing list