Haga etiquetas de imagen interactivas con qTip (jQuery Plugin)

Anuncio

Las imágenes pueden ser bastante sin vida y aburridas, a menos que sean interactivas e impresionantes, eso es. Y qTip lo hace fácil, con el poder de jQuery. Siga leyendo para descubrir cómo puede agregar etiquetas interactivas que aparecen cuando el usuario se desplaza sobre partes de una imagen.

Por qué querrías hacer esto? Personalmente, estoy usando la técnica en un nuevo sitio de comercio electrónico, por lo que el usuario puede desplazar elementos sobre una escena (como un catálogo de Ikea), con el título del producto y el botón Agregar al carrito que aparece dinamicamente. También podría usarse con buenos resultados en algo como un mapa de campus o ciudad, donde hay muchos elementos de formas extrañas que realmente podrían hacer con una descripción sin saturar el mapa. Un ejemplo muy simple también serían las etiquetas de Facebook, donde al pasar el cursor sobre la cara de una persona le dirá quiénes son. Sus usos están limitados solo por su imaginación.

Nota: Estoy asumiendo un conocimiento muy básico de jQuery y HTML aquí, al menos asegúrese de haber leído sobre

selectores Tutorial de jQuery - Introducción: conceptos básicos y selectoresLa semana pasada, hablé sobre la importancia de jQuery para cualquier desarrollador web moderno y por qué es increíble. Esta semana, creo que es hora de que nos ensuciemos las manos con algo de código y aprendamos cómo ... Lee mas , métodos Introducción a jQuery (Parte 2): Métodos y funcionesEsto es parte de una introducción continua para principiantes a la serie de programación web jQuery. La Parte 1 cubrió los conceptos básicos de jQuery sobre cómo incluirlo en su proyecto y los selectores. En la parte 2, continuaremos con ... Lee mas y funciones anónimas Introducción a jQuery (Parte 3): Esperando a que la página se cargue y funciones anónimasSe puede decir que jQuery es una habilidad esencial para el desarrollador web moderno, y en esta miniserie breve espero brindarle el conocimiento para comenzar a utilizarla en sus propios proyectos web. En... Lee mas .

qConsejo

qTip es un completo plugin de información sobre herramientas y etiquetado para jQuery, con una variedad de estilos. Lo usaremos específicamente con la funcionalidad del mapa de imágenes, pero eso no es todo lo que puede hacer. Echa un vistazo a la página de complemento para obtener más información o siga leyendo para comenzar.

Hacer un mapa de imagen

Los mapas de imágenes en sí mismos no son algo nuevo: los elementos de marcado están disponibles desde hace mucho tiempo y desde hace mucho tiempo en realidad se consideraba una buena forma de presentar un sistema de navegación, con partes de la imagen en las que se podía hacer clic y vinculadas secciones. El mismo código de mapa de imagen básico todavía se usa para esa parte de la funcionalidad, por lo que primero tendremos que definirlo.

Puede usar una variedad de herramientas para crear un mapa de imagen, Adobe Fireworks o Photoshop, pero la solución más fácil y gratuita es una herramienta en línea como éste. Ciertamente, no es la única herramienta en línea y no la estoy respaldando particularmente, pero parecía bastante simple de usar: háganos saber en los comentarios si encuentra una mejor. Puede definir formas rectangulares, circulares o incluso poligonales.

Comience cargando una imagen; en este caso, voy a etiquetar una captura de pantalla del sitio web MakeUseOf. Es posible que deba alejarse para ver su imagen completa en la herramienta.

Debería ser bastante obvio cómo usarlo como un programa básico de pintura: lo único que debe recordar es que al dibujar una forma polivinílica, debe mantener presionada la tecla MAYÚS en el último punto para cerrar y terminar. Aquí he definido 4 formas.

Cuando esté listo, desplácese hacia abajo y copie el código proporcionado.

Cree un nuevo documento HTML básico y limpie un poco el código, agregando una etiqueta de imagen para apuntar a su imagen original. La forma más fácil de probar esto es usar un JSFiddle. Aqui esta mi muestra, en su estado inicial (el conjunto de códigos final se proporciona más tarde, no se preocupe).

Recuerda darle a la imagen un mapa de uso atributo, apuntando a #carné de identidad del mapa que contiene las coordenadas (usemap = "# mymap", por ejemplo).

Agregando qTip

Si ha pegado su código en JSFiddle, verá que hay una opción en la barra lateral para incluir jQuery. Asegúrate de habilitar eso. También podemos agregar otros recursos externos aquí, así que continúe y agregue las URL para CSS y JS que figuran en la página de descarga de qTip. Copie y pegue los enlaces "todas las características y estilos" en JSFiddle, aunque en la práctica, usaría la herramienta de configuración a continuación para crear un conjunto personalizado de características o estilos.

La guía de implementación completa para qTip puede ser encontrado aquí, pero sigamos adelante y creemos algunas sugerencias simples basadas en texto. El siguiente Javascript apuntará a todos los elementos de área (los elementos que definen las partes de nuestro mapa de imágenes) en la carga de la página, diciéndole a qTip que trabaje en ellos con contenido de lo que esté en el atributo alt.

$ (documento) .ready (función () { $ ("área"). each (función (índice, elemento) { enlace var = $ (esto); $ (enlace) .qtip ({ contenido: link.attr ("alt") }); }); });

El diseño predeterminado es bastante feo: puede ver una demostración de él aquí - pero está bien, apliquemos un diseño personalizado a las ventanas emergentes como esta (He omitido parte del código, que muestra solo la sección específica de qTip).

$ (enlace) .qtip ({ contenido: link.attr ("alt"), estilo: { clases: 'qtip-bootstrap qtip-shadow' } });

También he incluido el BootStrap CSS archivo como un archivo externo, para ordenar las fuentes de navegador estándar feas. Esto es demasiado exagerado, lo sé. Aún así: mucho mejor!

Una cosa que ahora noto es que la posición predeterminada de abajo a la derecha no es realmente ideal. Para ajustar esto, usemos la configuración de posición:

$ (enlace) .qtip ({ contenido: link.attr ("alt"), estilo: { clases: 'qtip-bootstrap qtip-shadow' }, posición: { target: 'mouse', ajuste: { mouse: true // Se puede omitir (por ejemplo, comportamiento predeterminado) } } }); });

Ahora pase el cursor sobre cualquier elemento, y la información sobre herramientas seguirá a su mouse. Usted puede ver la demostración terminada aquí.

También puede hacer que la ventana emergente sea modal (por lo que todo lo demás se atenúa y necesita hacer clic afuera para volver a ella), o incluso cargar parte del contenido a través de una solicitud AJAX. Creo que es un pequeño complemento bastante limpio que da nueva vida a un estándar HTML bastante inutilizado, veamos qué puede hacer, y háganos saber en los comentarios si ha hecho algo con eso.