Configuración de un cursor [con CSS] en un área del mapa de imágenes

Question

¿Hay alguna manera de establecer un cursor en un elemento area con CSS? Parece que no. Este código parece no hacer nada en absoluto.

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> 

El mejor truco que he sido capaz de llegar a es posicionar absolutamente un enlace en la parte superior de esa zona, y darle el estilo del cursor

Answer 1

Recientemente tuve un problema con un cursor CSS que se muestra correctamente en firefox, pero no en Chrome o Safari.

Larga historia corta, Terminé necesitada para configurar la pantalla: bloque; en la etiqueta de área. O mi base CSS, o el navegador predetermina la etiqueta para mostrar: ninguno;

Este fue el caso de la prueba rápida creé (echa un vistazo 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; 
} 

Esperamos que esto ayude a alguien.

Answer 2

Definitivamente posicionar un enlace en la parte superior de la imagen sería mi solución/pirateo también.

Si no es una imagen de vital importancia, puede hacer esto de forma bastante semántica creando un contenedor con la imagen como fondo, coloque los enlaces de forma absoluta, y haga que el texto del enlace sea el alt que está usando actualmente. Luego, use un text-indent negativo en los enlaces para ocultar el texto de la vista. Funcionará como lo desea, pero cuando CSS está desactivado, debe mostrar enlaces de texto plano en lugar del mapa de imagen falso.

Answer 3

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> 

se limitan a dar el mapa un id a continuación, establecer el tipo de cursor para el área de esa identificación.

Answer 4

con el navegador Webkit, CSS:

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

no funciona, así que uso "href", y se puede inhabilitado como esto

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

Answer 5

La respuesta dada por toazron1 funciona perfectamente en WebKit/Safari y no tiene ninguna mala tema:

CSS

area { 
    cursor: help; 
    display: block; 
} 

La idea es display cualquier area correctamente, por lo display: inlinedisplay: initial y sorprendentemente también funcionaría, aunque el atributo href no está establecido.

Answer 6

aunque este desafío ha sido respondido, quería compartir una solución IE útil que descubrí experimentando.

el problema: estaba trabajando con un mapa de imagen en el que no quería que el cursor cambiara al estado de la mano/puntero al desplazarse. esto fue para una implementación de punta de herramienta (qTip) que no requirió enlaces de anclaje reales. quería que el cursor permanezca como una flecha (estado predeterminado) o que cambie a otro estado al pasar el mouse. ?

no pude conseguir IE para reconocer los estilos - el cursor todavía cambió en vuelo estacionario :(

la solución como un último intento, he añadido los estilos:

cursor: default; 
display: block; 

pero ellos asociados también a la imagen utilizada para el propio mapa:

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

esperanza de que esto es útil para algunos