Haga etiquetas de imagen interactivas con qTip (jQuery Plugin)

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 averiguar 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, para que el usuario pueda desplazarse sobre los elementos de una escena (como un catálogo de Ikea), con el título del producto y el botón Agregar al carrito que aparece dinámicamente. También podría usarse con buenos resultados en algo como un mapa del campus o de la ciudad, donde hay muchos elementos de formas extrañas que realmente podrían hacer con una descripción sin abarrotar el mapa. Un ejemplo muy simple también serían las etiquetas de Facebook, donde pasar el cursor sobre el rostro de una persona le dirá quiénes son. Sus usos están limitados únicamente por su imaginación..

Nota: asumo un conocimiento muy básico de jQuery y HTML aquí, al menos asegúrese de haber leído sobre los selectores Tutorial de jQuery - Primeros pasos: conceptos básicos y selectores Tutorial de jQuery - Primeros pasos: conceptos básicos y selectores La semana pasada, hablé de lo importante que es jQuery para cualquier desarrollador web moderno y por qué es increíble. Esta semana, creo que es hora de que nos ensuciemos con algún código y aprendamos cómo ... Leer más, métodos Introducción a jQuery (Parte 2): Métodos y funciones Introducción a jQuery (Parte 2): Métodos y funciones Esto es parte de un Introducción para principiantes a la serie de programación web jQuery. La Parte 1 cubrió los conceptos básicos de jQuery de cómo incluirlo en su proyecto y los selectores. En la parte 2, continuaremos con ... Leer más y funciones anónimas Introducción a jQuery (Parte 3): Esperando la página para cargar y funciones anónimas Introducción a jQuery (Parte 3): Esperando la página para cargar y funciones anónimas Podría decirse que jQuery es una habilidad esencial para el desarrollador web moderno, y en esta pequeña miniserie espero poder brindarle el conocimiento para comenzar a utilizarlo en sus propios proyectos web. En… Leer más .

qConsejo

qTip es una herramienta completa y un complemento de etiquetado para jQuery, con una variedad de estilos. Lo usaremos específicamente con la funcionalidad de mapa de imagen, pero ciertamente eso no es todo lo que puede hacer. Eche un vistazo a la página del complemento para obtener más información o siga leyendo para comenzar.

Haciendo un Mapa de Imagen

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

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 esta. Ciertamente, no es la única herramienta en línea y no la estoy respaldando particularmente, pero me pareció lo suficientemente simple de usar. Háganos saber en los comentarios si encuentra una mejor. Puedes 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 necesite alejar la imagen para ver su imagen completa en la herramienta.

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

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

Cree un nuevo documento HTML básico y limpie el código un poco, agregando una etiqueta de imagen para que apunte a su imagen original. La forma más fácil de hacer esto es usar un JSFiddle. Aquí está mi muestra, en su estado inicial (el código final se proporciona más adelante, no se preocupe).

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

Añadiendo en qTip

Si has pegado tu código en JSFiddle, verás 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 adelante, agregue las URL para CSS y JS que figuran en la página de descarga qTip. Copia y pega el “todas las características y estilos” enlaces a JSFiddle: aunque en la práctica, usaría la herramienta de configuración que se encuentra debajo para crear un conjunto personalizado de características o estilos.

La guía de implementación completa para qTip se puede encontrar aquí, pero avancemos y creamos algunas sugerencias simples basadas en texto. El siguiente Javascript apuntará a todos los elementos del área (los elementos que definen las partes de nuestro mapa de imágenes) en la carga de la página, indicando a QTip que trabaje en ellos con el contenido del atributo alt..

 $ (document) .ready (function () $ ("area"). each (function (index, element) var link = $ (this); $ (link) .qtip (content: link.attr (" alt ")););); 

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

$ (link) .qtip (content: link.attr ("alt"), estilo: classes: 'qtip-bootstrap qtip-shadow'); 

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

Una cosa que ahora observo es que la posición predeterminada de la parte inferior derecha no es realmente ideal. Para ajustar esto, vamos a usar la configuración de posición:

$ (link) .qtip (content: link.attr ("alt"), estilo: classes: 'qtip-bootstrap qtip-shadow', position: target: 'mouse', ajustar: 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. Puedes ver la demo terminada aquí.

También puede hacer que el menú emergente sea modal (para que todo lo demás quede atenuado, y debe hacer clic afuera para volver a él), o incluso cargar contenido a través de una solicitud AJAX. Creo que es un pequeño y bonito plugin que le da nueva vida a un estándar HTML bastante no utilizado. Veamos qué puede surgir, y háganoslo saber en los comentarios si ha hecho algo con él..

Explore más sobre: ​​jQuery, cartera en línea, intercambio de fotos.