cursor no cambia a puntero en el caso usemap/área

Question

Tengo el siguiente código HTML que no puedo ir a trabajar del todo bien en todos los navegadores:

<div id ="right_header">  
     <img id = "usemapsignin" src="/images/sign-in-panel-wo-FB.png" usemap = "#signin"> 
</div>  
     <map name = "signin" > 
      <area shape = "rect" coords = "30,10, 150, 50" target = "_blank" alt = "signin" id="signin" 
        onMouseOver="document.images['usemapsignin'].style.cursor='pointer'" 
      onMouseOut="document.images['usemapsignin'].style.cursor='auto'"/> 
      <area shape = "rect" coords = "0,113, 172, 150" target = "_blank" alt = "restowner" id = "restowner" 
       onclick = "alert('Hello Restaurant Owner!')" /> 
     </map> 

Estoy intentando cambiar el cursor de puntero cuando se mueve sobre una parte del mapa de uso. Pero no funciona en Chrome/Safari.

Cualquier ayuda será apreciada.

Answer 1

Chrome y Safari no son compatibles con el cambio de CSS de los elementos de mapa o área. La única forma sencilla de obtener una MousePointer en un área es tener:

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

Answer 2

IE no admite el cambio del cursor en el área de la etiqueta.

Lo que tienes que hacer es engañar con JS.

<img id="someimage" scr="images/image.jpg" usemap="#myareamap" /> 

<map name="myareamap"> 
    <area shape="poly" alt="test" title="test" coords="0,0, 50,50, 50,100, 0,100, 0,0" onmouseover="changeimage('someimage', 'newimagesrc')" /> 
</map> 

esto es en su Javascript

function changeimage(id, imagesrc){ 
    document.getElementById(id).src = imagsrc; 
    if (imagesrc = "images/image.jpg"){ 
     document.getElementById(id).style.cursor = "default"; 
    } else { 
     document.getElementById(id).style.cursor = "pointer"; 
    } 
} 

Esto hará dos cosas:

• le permitirá cambiar fácilmente la imagen basándose en el mapa de imágenes que desplazarse más.
• le dará la ilusión de que sólo la parte de la areamap scolled sobre cambia el cursor.

Answer 3

Esto debería funcionar en IE, Firefox, Chrome y Safari.

<img id="img_id" src="image.gif" border="0" usemap="#map4" /> 
<map id ="map4" name="map4"> 
    <area shape ="poly" coords="5, 0, 100, 10, 94, 66, 0, 50" 
      href="javascript:void(0);" 
      onmouseover="document.getElementById('img_id').style.cursor='pointer';" 
      onmouseout="document.getElementById('img_id').style.cursor='';"> 
</map> 

Answer 4

Tuve un problema similar. La solución fue agregar el atributo href="#" al área en lugar de hacer un hack de CSS.

Answer 5

Todas estas soluciones son hacks que no funcionan bien (para mí no funcionaron en absoluto). Después de mucho mirar y reflexionar, determiné que el problema es que el navegador simplemente no sabe cómo representar el elemento de área, por lo tanto, no se puede diseñar. Si está utilizando elementos HTML5, debe estar familiarizado con este desafío. Entonces fue cuando se apagó la bombilla ..

Para evitar esto, simplemente configure la etiqueta de área como un elemento de nivel de bloque. Luego puedes darle estilo según sea necesario. Funcionó muy bien para mí:

area { 
    display: block; 
    cursor: pointer; 
} 

Answer 6

¡Encontré una gran solución usando Jquery!

$('area').hover(function(){ 
    //Set your cursor to whatever 
    $('body').css('cursor', 'help'); 
}, function() { 
    //set your cursor back to default 
    $('body').css('cursor', 'initial'); 
})