Geek asks and answers

Positioning the cursor [using CSS] on the image map area

Is there a way to set cursorin an element areausing CSS? No, it seems. This code does nothing at all.

CSS

area {cursor: help;}

HTML

<img src="blah.png" width="800" height="550" alt="Blah" usemap="#blah-map">
<map name="blah-map">
    <area shape="rect" coords="104,86,210,113" href="okgo.htm" alt="OK Go">
</map>

The best hack I could come up with is to absolutely position the link on top of this area and give it a cursor style.

+5
source share
6 answers

I recently had a problem with the css cursor displaying correctly in Firefox, but not in chrome or safari.

In short, I had to set display: block; on the tag area. Either my base css or the default browser displays a tag: none;

It was a quick test script that I created (check HERE )

<img usemap="#map" src="http://i.imgur.com/9EcEvkn.jpg" height="120" width="100" />
<map name="map" id="map">
<area shape="rect" coords="0,0,120,100" href="#" />
</map>

area {
    cursor: crosshair;
    display:block;
}

Hope this helps someone.

+12

/.

, , , alt, . text-indent , . , , CSS , .

+1

CSS

#blah-map area{
    cursor:default;
}

HTML

<img src="blah.png" width="800" height="550" alt="Blah" usemap="#blah-map">

<map id="blah-map" name="blah-map">
    <area shape="rect" coords="104,86,210,113" href="okgo.htm" alt="OK Go">
</map>

, .

0

Webkit, CSS:

area {cursor: help;} /* or other type */

, "href",

<area ... href="javascript:void(0);" />
0

, toazron1, WebKit/Safari :

CSS

area {
    cursor: help;
    display: block;
}

display any area , display: inline display: initial , href .

0

, IE, , .

: , , / . (qTip), . , ( ) .

I could not get IE to recognize the styles - the cursor was still changing on hover :(

decision? as a last attempt, I added styles:

cursor: default;
display: block;

but I also linked them to the image used for the card itself:

area, img {cursor: default; display: block;}

hope this is helpful to some.

0
source

More articles:


All Articles