Tengo una imagen y en ella hay logotipos (es un mapa), quiero tener un pequeño cuadro emergente con información sobre la ubicación de ese logotipo cuando el usuario mueve el mouse sobre dicho logotipo.Información sobre herramientas en una imagen
¿Puedo hacer esto sin utilizar un marco de JavaScript y, de ser así, hay algunas bibliotecas/scripts que me permitan hacer algo así?
Sí, puede hacerlo sin Javascript. Utilice un mapa de imagen HTML, con los atributos de título, así:
<img usemap="#logo" src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png">
<map name="logo">
<area shape="rect" href="" coords="52,42,121,65" title="Stack">
<area shape="rect" href="" coords="122,42,245,65" title="Overflow">
</map>
logo El desbordamiento de pila se refiere a la image map, que define un rectángulo para cada una de las dos palabras que utilizan una etiqueta de area. Cada elemento de la etiqueta area de title especifica el texto que los navegadores generalmente muestran como información sobre herramientas. El atributo shape también puede especificar un círculo o polígono.
Una sola imagen por sí sola no proporciona al navegador la información semántica de los logotipos que contiene. Puede usar un image map para proporcionar las coordenadas. Para lograr información sobre herramientas, simplemente aplique un atributo title a cada enlace. Para obtener información sobre herramientas más sofisticadas (por ejemplo, con estilo, líneas múltiples, etc.), necesitará algo no estándar, como UniTip.
MooTools tiene una secuencia de comandos ingeniosa para esto. Ver MooTools Tips. Ligero en el HTML también.
Aquí hay un demo de la versión 1.11.
El atributo title es la solución más simple y está garantizado que funciona, y se degradan con gracia para agentes de soporte que no lo admiten correctamente.
En efecto mootools es uno de los muchos marcos
que le permiten agregar funcionalidad a cualquier elemento de
su página web. Aquí hay un enlace a un pequeño tutorial.
http://mootorial.com/wiki/mootorial/08-plugins/03-interface/01-tips
Mootools no es realmente un tipo de copiar y pegar del marco,
se le anima a mirar por encima del código suministrado y
rodar su propia solución con algunos excelentes ejemplos.
Puede probar el widget de javascript en http://www.taggify.net/. La secuencia de comandos permite agregar información sobre herramientas para la parte de la imagen: cuando el usuario mueve el mouse sobre la región de la foto, la información emergente emergente de la secuencia de comandos dibuja el borde alrededor de la región y difumina otras partes. Cosa genial para marcar personas en la foto. Vea la demostración en http://www.taggify.net/demo.aspx
puede usar el atributo title para información sobre herramientas simple. funciona en casi todos los objetos DOM.