Mapa de imagen en el mouse sobre el show div

Así que estoy tratando de crear múltiples mapas de imágenes en una imagen y luego, basándome en la imagen sobre la que se está desplazando, extraerá esa información específica de un div que se encuentra debajo de la imagen y la rellenaré junto a la imagen flotante.

hat glasses

Type of hat

I love this hat.I wore it when I was running from a bear in the zoo.

These glasses were hand picked by a Sherpa from Kentucy!

Quiero que los divs permanezcan abajo, para no estar ocultos, sino también para tener la funcionalidad que se puede desplazar cuando coloco el cursor sobre la imagen a la que hace referencia. No estoy seguro de si necesito usar jQuery para esto o incluso cómo crear ese código.

Siento que el código haría algo como: onmouse al pasar este imgmap y luego mostrar el div al que hace referencia este mapa de imágenes. No tengo idea de cómo se vería esto en lenguaje de código. Gracias por la ayuda.

Supongo que quieres el eup emergente.

Por favor, vea una demostración que he preparado para usted usando su marca.

Aquí está la jQuery de trabajo

 var $popup = $('.popup'); $('area').on({ mouseover : function(e){ var $this = $(this), $obj = $('#'+$this.prop('alt')); $popup.text($obj.text()).css({ top: e.pageY + 25, left: e.pageX - ($popup.width()/2), }).show(); }, mouseout: function(){ var $this = $(this), $obj = $('#'+$this.prop('alt')); $popup.hide(0).empty(); } });