quitar - cursor personalizado html

El cursor no cambia al puntero en el caso de Usemap/area

Question

Tengo el siguiente código HTML que no puedo trabajar 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 puntero al puntero cuando se mueve sobre una parte del mapa del usuario. Pero no está funcionando en Chrome / Safari.

Cualquier ayuda será apreciada.

Answer 1

¡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'');
})

Answer 2

Chrome y Safari no admiten el cambio de CSS de elementos de mapa o área. La única forma sencilla de obtener un ratón en un área es tener:

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

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

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

Lo que tienes que hacer es engañarlo 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 esta en tu 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:

• Te permitirá cambiar fácilmente la imagen en función del mapa de imágenes sobre el que se desplazan.
• Te dará la ilusión de que solo la parte del mapa de área desplazada cambia el cursor.

Answer 5

Todas estas soluciones son hacks que no funcionan bien (para mí no funcionaron en absoluto). Después de mucho goggling, y más reflexionando, determiné que el problema era que el navegador simplemente no sabe cómo renderizar el elemento del área, por lo tanto, no puede ser estilizado. Si está utilizando elementos HTML5, debería estar familiarizado con este desafío. Fue entonces cuando se apagó la bombilla ..

Para solucionar esto, simplemente configure la etiqueta de área como un elemento de nivel de bloque. A continuación, puede diseñarlo según sea necesario. Funcionó muy bien para mí:

area {
  display: block;
  cursor: pointer;
}

Answer 6

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