Menu
Is there any way to set a cursor on an area element with CSS? It seems not. This code appears to do 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 have been able to come up with is to absolutely position a link on top of that area, and give it the cursor style.
791
Answer: Use the CSS cursor property You can define a custom cursor using the CSS cursor property. The cursor property takes the comma-separated list of user-defined cursors value followed by the generic cursor. First of all create cursor image and save it with the extension .
Apply the CSS property cursor:pointer; to the elements. (This is the default style when a cursor hovers over a button.) Apply the CSS property cursor:url(pointer. png); using a custom graphic for your pointer.
The <area> tag defines an area inside an image map (an image map is an image with clickable areas). <area> elements are always nested inside a <map> tag. Note: The usemap attribute in <img> is associated with the <map> element's name attribute, and creates a relationship between the image and the map.
The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user. One good usage of this property is in using images for submit buttons on forms. By default, when a cursor hovers over a link, the cursor changes from a pointer to a hand.
I recently had an issue with a css cursor displaying in firefox correctly, but not in chrome or safari.
Long story short, I ended up needed to set display:block; on the area tag. Either my base css, or the browser defaults the tag to display:none;
This was the quick test case I created (check it out 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;
}
Hopefully this helps someone.
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
