Tengo un mapa con etiquetas de area configuradas, para el cual me gustaría tener un evento al pasar el onmouseover , cambiando la apariencia del cursor para decirle al usuario que se puede hacer clic. Pero, hay un problema al usar safari:
Usando onmouseover="style.cursor = 'pointer';" no parece funcionar en la etiqueta de area . En general, no, ya que activa totalmente otras cosas cuando se cierne sobre él. Safari también me permite cambiar su apariencia de otras formas, pero con esta combinación simplemente no lo hace...
<div class="desktop"> <img src="docs/docs_overview_desktop.jpg" usemap="#desktop"> <map name="desktop"> <area shape="rect" coords="2057.143,0,2742.857,960" onmouseover="style.cursor = 'pointer';" onclick="document.getElementById('lightboxSrc').src='docs/docs_000.jpg'; lightboxOpen();"> </map> </div>Safari no siempre admite las funciones "generales" que hacen otros navegadores en estos días. Pero aun así, me cuesta creer que no admitirían un evento onmouseover, por lo que probablemente sea el resto del código el que esté causando el problema de que no funcione.
Si realmente desea usar JavaScript para aplicar el estilo de un puntero, intente hacerlo más específico de esta manera: onmouseover="this.style.cursor='pointer';"
Pero, ¿por qué usar JavaScript cuando desea agregar un estilo? CSS solo sería suficiente, solo coloque esto en su hoja de estilo y puede eliminar todo en línea al pasar el mouse:
.desktop area:hover{ cursor: pointer; } O use un href="#" vacío para que los navegadores vean que es un enlace y muestre el puntero de forma predeterminada.
Aquí hay un ejemplo. ¡Asegúrate de que tus coordenadas también estén en la imagen, por supuesto!
img { width: 100px; height: 100px; border: solid 1px black; } <div class="desktop"> <img src="docs/docs_overview_desktop.jpg" usemap="#desktop"> <map name="desktop"> <!-- Coords are from left uper corner (10px on the x and y axis) to the right bottom corner (90px on the x and y axis) --> <area shape="rect" coords="10,10,90,90" onclick="document.getElementById('lightboxSrc').src='docs/docs_000.jpg'; lightboxOpen();" href="#"> </map> </div>