Propiedad cursor (hand / pointer) en IExplorer 11
Tengo un "problema": tengo un mapa en imagen y en zonas de ese mapa tengo localizadas unas <area> ... Tengo puesto en el estilo la propiedad cursor como pointer, funciona bien en firefox, en chrome, pero no en el explorer, que supuestamente cambiando "pointer" por "hand" debería funcionar, pero no lo hace ... De manera que pasando el mouse por encima de dicha zona el cursor no cambia de forma como debería ser ...
¿Alguna solución?
He tratado de cambiarlo añadiendo un className al hacer onmouseover ... Pero nada ...
2 respuestas
La respuesta es la siguiente: ayudándonos de javascript.
En IE esto no funciona (no cambia el cursor cuando pasa por encima del area seleccionada):
<div id=”capa_imagen” ...> <img src=”.../imagen.jpg” usemap=”#filtrar_zonas” /> </div> <map name=”filtrar_zonas”> <area shape=”poly” coords=”...,...,...” style=”cursor:pointer”> </map>
La solución (solo añado lo que se debe añadir/modificar):
<script language=”javascript” type=”text/javascript”>
function cambiar_cursor(pa_valor){
if (pa_valor==0){
document.getElementById(“capa_imagen”).style.cursor=”default”;
}
else{
document.getElementById(“capa_imagen”).style.cursor=”pointer”;
}
return;
}
</script>
<area shape=”poly” coords=”...,...,...” style=”cursor:pointer”
onmouseover=”javascript:cambiar_cursor(1);”
onmouseout=”javascript:cambiar_cursor(0);”>
Según la documentación oficial de microsoft, debería funcionar:
https://msdn.microsoft.com/en-us/library/aa358795(v=vs.85).aspx
Below are the different possible values for the cursor property:
Examples
The following examples use the cursor CSS property and the cursor scripting property to change the cursor as it passes over an object.
This example uses a call to an embedded (global) style sheet to set the cursor to hand as the cursor passes over all paragraphs.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/cursor_h.htm
HTML
<style type="text/css">
p { cursor: hand; }
</style>
This example uses inline scripting to set the cursor to hand as the cursor passes over the paragraph.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/cursor_s.htm
HTML
<p onmouseover="this.style.cursor='hand'">
This example demonstrates setting a custom cursor, by using the url(uri) value. Notice the addition of a fallback pointer. Without this fallback pointer, this custom cursor does not render.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/cursor_c.htm
HTML
<style type="text/css">
oBox.style.cursor = "url(" + Some_Uniform_Resource_Identifier + "), pointer";
</style>
Here is a sample of all currently supported cursors.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/cursor_a.htm
--------------------
Gracias por contestar.
Esa página u otra con la misma información ya la había visto, y si, funciona para varios elementos, pero para el que comento yo no, al menos a mi, o sea, en las imágenes "mapeadas" con areas delimitadas, ahí es donde a mi no me funciona ... He tratado de "encerrar" dicho area dentro de un link (<a ...> </a>), para ver si así engañaba al navegador, pero no.
¿Alguna idea más para ese elemento?
No has valorado la respuesta previa
No se valoran las respuestas individuales sino cuando se finaliza (positivamente o negativamente) la cuestión que da pie y no la doy por finalizada, aunque si así lo deseas, ya la tienes.
Visto lo visto, era de esperar, porque siempre antes de responder, miro el perfil del usuario para valorar el tipo de persona.
En tu caso, he dudado:
Has hecho 390 PREGUNTAS y sólo has votado 192 positivamente...
Casi no das votaciones y sólo valoras a menos de la mitad de las personas que TE han dedicado su tiempo para AYUDARTE...
No te preocupes ni te molestesientes en contestarme porque he bloqueado tus respuestas y tranquilo que no volveré a responderte ni una sola duda que tengas.