Las áreas dentro de los mapas de imágenes HTML tradicionales soportan el atributo title que hace posible la información sobre herramientas regular. A veces, la información sobre herramientas predeterminada del navegador simplemente no funciona, especialmente con sus retrasos incorporados.
Mi paquete favorito para crear información sobre herramientas sofisticadas es Prototip para el framework Prototype javascript. Prototip se puede descargar gratis, pero requiere una pequeña tarifa de licencia para usarlo en sus dominios. Usaremos solo una pequeña fracción de lo que Prototip es capaz de hacer aquí, pero es de esperar que esta demostración abra la puerta a la posibilidad en caso de que necesite hacer algo como esto.
Ver demostración Descargar archivos
Imagen Mapeo de la imagen
La creación de mapas de imágenes es una de las pocas funciones que siempre abro Dreamweaver. Cuando tiene una imagen seleccionada en su página en Dreamweaver, obtiene pequeñas herramientas para dibujar las áreas directamente en la imagen.
No se puede superar eso por simplicidad, intentar crear áreas sin algún tipo de editor WYSIWYG sería una pesadilla. Use este código como punto de partida y luego puede agregar identificaciones únicas a cada zona. Necesitará esos ID únicos para apuntar con Prototip. Su código final será algo como esto:
<img src="https://css-tricks.com/image-map-with-prototype-tooltips/images/image.jpg" alt="image" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="147,131,12" href="#" id="tooltip-1"/>
<area shape="circle" coords="178,169,12" href="#" id="tooltip-2" />
</map>Agregar Prototip
Deberá incluir el prototipo y los archivos javascript de prototipo en su encabezado, luego use la nueva función Tip para crear la información sobre herramientas para cada ID.
<script type="text/javascript" src="https://css-tricks.com/image-map-with-prototype-tooltips/js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/prototip.js"></script>
<script type="text/javascript">
function init() {
//<![CDATA[
new Tip('tooltip-1', '<h3>Content for Tooltip 1</h3>', {title : '', className: 'silver', effect: 'slide', showOn: 'mousemove', hideOn: 'mouseout', fixed: true, hook:{target: 'topLeft', tip: 'bottomLeft'} });
new Tip('tooltip-2', '<h3>Content for Tooltip 2</h3>', {title : '', className: 'silver', effect: 'slide', showOn: 'mousemove', hideOn: 'mouseout', fixed: true, hook:{target: 'topLeft', tip: 'bottomLeft'} });
//]]>
}
Event.observe(window, 'load', init, false);
</script>Puedes ver en el código de arriba algunas de las diferentes opciones para Prototip. En primer lugar, orienta la ID y proporciona el contenido HTML para la sugerencia. Luego, puede aplicar un nombre de clase, orientación geográfica y cambiar los eventos en los que se activan las descripciones emergentes.
CSS de información sobre herramientas
Este ejemplo utiliza un estilo muy básico.
.prototip { position: absolute; }
.prototip .silver { width: 733px; font-size: 1.8em; }
.prototip .silver .content { text-align: center; padding: 10px 0; }Lo más importante es que necesita un posicionamiento absoluto aplicado al elemento .prototip para que sus sugerencias puedan aparecer donde se supone que deben hacerlo y no afectar el flujo de diseño del documento. Luego, a través de su clase aplicada, puede hacer el resto de su estilo. Esto le permite tener diferentes estilos para diferentes información sobre herramientas, lo cual es una gran característica. Observe que en el ejemplo tenemos “plata” como el nombre de la clase. Esto es lo que se aplica en el javascript y el objetivo de CSS.
Entonces, el descargo de responsabilidad habitual se aplica aquí. Hay muchas formas de hacer esto. Puede crear información sobre herramientas de CSS puro si lo desea y estoy seguro de que cada marco de JavaScript importante tiene una solución propia. Mi enfoque aquí es mostrar que puede adjuntar esa información sobre herramientas a mapas de imágenes a través de una identificación única, que puede ser bastante útil.