style - ¿Establecer un color de fondo en el elemento HTML<área>?

title html attribute

Question

¿Hay alguna forma de establecer un color de fondo para el elemento HTML <area> ? Estoy creando un mapa de imágenes en el que ciertas secciones del mapa mostrarán una información sobre herramientas cuando pases el mouse sobre ellas, y pensé que sería genial (y conveniente) si pudiera establecer un color de fondo para los elementos <area> para que Podía ver dónde estaban ubicadas sobre la imagen.

He probado tanto el color de fondo como el borde, y ninguno tiene ningún efecto: los elementos <area> permanecen "invisibles". Supongo que esto se debe a que <area> es una etiqueta de cierre automático y, por lo tanto, ¿no tiene realmente ninguna dimensión? Pero forzar una altura y una anchura tampoco ayudaron.

Answer 1

Hay dos bibliotecas que proporcionan esta característica. Ambos funcionan de la misma manera no trivial: verificando si el navegador es compatible con Canvas, luego si lo hace, dibujando una forma de Canvas, y si no lo hace (es decir, Internet Explorer), dibujando VML.

• Maphilight como se mencionó anteriormente ( enlace que funciona en 2013 )
  • También incluye agrupación básica.
• ImageMapster (complemento jQuery) que proporciona esta y otras características de mapa de imagen:
  • Escalado de mapas de imágenes (por ejemplo, para usar con imágenes sensibles)
  • Cambio a imágenes alternativas dentro del área.
  • Información sobre herramientas fácil y enlace de eventos con listas
  • Agrupamiento

Hay algunas demostraciones bastante buenas en el sitio ImageMapster .

Answer 2

No parece posible.

Es posible que desee ver este complemento jQuery:

http://plugins.jquery.com/project/maphilight

Aquí hay un ejemplo:

http://davidlynch.org/js/maphilight/docs/demo_usa.html#

Answer 3

Puede asignar al div subyacente una identificación y luego usar javascript para cambiar el color de fondo de los divs.

 <div id = "myDiv"></div>

y

 document.getElementById("myDiv").style.backgroundColor = "#FFFFFF";

Answer 4

Puedes agregar un título para que cuando alguien se mueva sobre él, pueda conocerlo.

Ejemplo:

<area title="amazing" shape="rect" coords="0,0,82,126" alt="cool">

Answer 5

u puede usar div(set postition:absolute) lugar de area

Answer 6

<script>
$(function()
{
$(''.map'').maphilight({
fillColor: ''008800''
});
var data = $(''#id'').data(''maphilight'') || {};
data.alwaysOn = !data.alwaysOn;
$(''#id'').data(''maphilight'', data).trigger(''alwaysOn.maphilight'');
});