0
293
Views¿Asignar dinámicamente con jquery css arriba y a la izquierda para un mapa de imagen?
Tengo un mapa de imagen que tiene una función de retorno de texto desde el atributo alt. Por el momento, la ventana emergente es una capa css llamada superposición a la que se le asignan las coordenadas superior e izquierda, de modo que la ventana emergente, sin importar en qué parte del mapa de la imagen, siempre estará en la misma posición, sin embargo, me pregunto si hay una manera de asignar la parte superior e izquierda de modo que esté más cerca del mapa de imagen sobre el que se está desplazando?
Se ve así, observe que la ventana emergente siempre está en la esquina izquierda. 
Aquí está el código I adaptador de otro jfiddle.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script> <style id="compiled-css" type="text/css"> #map { position: relative; } #overlay { position: absolute; background: #000; color: #fff; top: 50px; left: 50px; width: 100px; } </style> <div id="map"> <div id="overlay"></div> <img src="https://i.imgur.com/f9HmUmf.jpg" alt="test" usemap="#g1"> </div> <map name="g1"> <area shape="rect" coords="0,0,100,100" alt="one" href="http://www.one.com"> <area shape="rect" coords="100,0,200,100" alt="two" href="http://www.two.com"> <area shape="rect" coords="200,0,300,100" alt="three" href="http://www.three.com"> <area shape="rect" coords="300,0,400,100" alt="4" href="http://www.four.com"> <area shape="rect" coords="400,0,500,100" alt="5" href="http://www.five.com"> <area shape="rect" coords="0,100,100,200" alt="1b" href="http://www.onebottom.com"> <area shape="rect" coords="100,100,200,200" alt="2b" href="http://www.twobottom.com"> <area shape="rect" coords="200,100,300,200" alt="3b" href="http://www.threebottom.com"> <area shape="rect" coords="300,100,400,200" alt="4b" href="http://www.fourbottom.com"> <area shape="rect" coords="400,100,500,200" alt="5b" href="http://www.fivebottom.com"> </map> <script type="text/javascript">//<![CDATA[ $('area').each(function(){ var area = $(this), alt = area.attr('alt'); area.mouseenter(function(){ $('#overlay').html(alt); }).mouseleave(function(){ $('#overlay').html(''); }); }); //]]></script>1 answers
Answer question0
Puede cambiar la top e left dependiendo de la top e left de las coordenadas del mapa. Lo siguiente hará que la superposición se adhiera a la parte superior de cada imagen, pero puede agregar compensaciones según sea necesario.
$('area').each(function(){ var area = $(this), alt = area.attr('alt'); area.mouseenter(function() { // Grab the coords, then the top and left const coords = area.attr('coords').split(',') const top = parseInt(coords[1], 10) const left = parseInt(coords[0], 10) // Use `css()` to modify the top and left of the overlay $('#overlay').html(alt).css({ top: `${top + 40}px`, left: `${left}px`, }) }).mouseleave(function(){ $('#overlay').html(''); }); }); <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script> <style id="compiled-css" type="text/css"> #map { position: relative; } #overlay { position: absolute; background: #000; color: #fff; top: 50px; left: 50px; width: 100px; } </style> <div id="map"> <div id="overlay"></div> <img src="https://i.imgur.com/f9HmUmf.jpg" alt="test" usemap="#g1"> </div> <map name="g1"> <area shape="rect" coords="0,0,100,100" alt="one" href="http://www.one.com"> <area shape="rect" coords="100,0,200,100" alt="two" href="http://www.two.com"> <area shape="rect" coords="200,0,300,100" alt="three" href="http://www.three.com"> <area shape="rect" coords="300,0,400,100" alt="4" href="http://www.four.com"> <area shape="rect" coords="400,0,500,100" alt="5" href="http://www.five.com"> <area shape="rect" coords="0,100,100,200" alt="1b" href="http://www.onebottom.com"> <area shape="rect" coords="100,100,200,200" alt="2b" href="http://www.twobottom.com"> <area shape="rect" coords="200,100,300,200" alt="3b" href="http://www.threebottom.com"> <area shape="rect" coords="300,100,400,200" alt="4b" href="http://www.fourbottom.com"> <area shape="rect" coords="400,100,500,200" alt="5b" href="http://www.fivebottom.com"> </map> Si desea que la superposición se "mueva" al pasar el mouse, puede cambiar css para animate y darle un tiempo de animación:
$('#overlay').html(alt).animate({ top: `${top}px`, left: `${left}px`, }, 100)Tenga en cuenta que deberá cambiar la posición de inicio en su CSS para evitar que se anime desde el centro en el primer desplazamiento.