¿Cómo aplicar Flotación en la etiqueta de área html?

Lo que hice fue crear un elemento canvas que luego coloqué frente al mapa de imágenes. Luego, cada vez que un área pasa a segundo plano, invoco un func que obtiene la cadena coord para esa forma y el tipo de forma. Si es un poli uso las coordenadas para dibujar un contorno en el canvas. Si es un rect, dibujo un contorno rect. Puede agregar código fácilmente para tratar con círculos.

También puede establecer la opacidad del canvas a menos del 100% antes de rellenar el poli / recto / círculo. También podría cambiar la dependencia de un contexto global para el canvas; esto significaría que podría tratar con más de 1 mapa de imágenes en la misma página.

 < !DOCTYPE html>          
imgmap201293016112 imgmap201293016112-0 imgmap201293016112-1 imgmap201293016112-2 imgmap201293016112-3 imgmap201293016112-4 imgmap201293016112-5 imgmap201293016112-6 imgmap201293016112-7 imgmap201293016112-8 imgmap201293016112-9 imgmap201293016112-10 imgmap201293016112-11 imgmap201293016112-12 imgmap201293016112-13 imgmap201293016112-14 imgmap201293016112-15 imgmap201293016112-16 imgmap201293016112-17 imgmap201293016112-18 imgmap201293016112-19 imgmap201293016112-20 imgmap201293016112-21 imgmap201293016112-22 imgmap201293016112-23 imgmap201293016112-24 imgmap201293016112-25 imgmap201293016112-26 imgmap201293016112-27 imgmap201293016112-28 imgmap201293016112-29 imgmap201293016112-30 imgmap201293016112-31 imgmap201293016112-32 imgmap201293016112-33 imgmap201293016112-34 imgmap201293016112-35 imgmap201293016112-36 imgmap201293016112-37 imgmap201293016112-38 imgmap201293016112-39 imgmap201293016112-40 imgmap201293016112-41

Puedes usar jQuery para lograr esto

Ejemplo:

 $(function () { $('.map').maphilight(); }); 

Pase por este ENLACE para saber más.

Si el anterior no funciona, entonces vaya a través de este enlace .

EDITAR :

Dale la misma clase a cada etiqueta de area como class="mapping"

y prueba este código a continuación

 $('.mapping').mouseover(function() { alert($(this).attr('id')); }).mouseout(function(){ alert('Mouseout....'); }); 

para completar este guión, la función para dibujar círculo,

  function drawCircle(coordon) { var coord = coordon.split(','); var c = document.getElementById("myCanvas"); var hdc = c.getContext("2d"); hdc.beginPath(); hdc.arc(coord[0], coord[1], coord[2], 0, 2 * Math.PI); hdc.stroke(); }