Hacer etiquetas de imágenes interactivas con qtip (jquery plugin)

Las imágenes pueden ser bastante sin vida y aburrido - a menos que sean interactivos y impresionante, es decir. Y QTIP lo hace fácil, con el poder de jQuery. Siga leyendo para averiguar cómo se pueden agregar etiquetas interactivas que aparecen cuando el usuario se desplaza sobre partes de una imagen.

Por qué querrías hacer esto? En lo personal, estoy usando la técnica en un nuevo sitio de comercio electrónico - por lo que el usuario puede flotar-más elementos de una escena (como un catálogo de Ikea), con el título del producto y añadir a la cesta botón que aparece de forma dinámica. También podría ser utilizado con buenos resultados en algo así como un campus o ciudad mapa, donde hay un montón de elementos de formas extrañas que realmente podría hacer con una descripción sin mover el mapa. Un ejemplo muy simple sería también etiquetas de Facebook, donde se cierne sobre una cara de las personas le dirá lo que son. Sus aplicaciones son limitadas solamente por su imaginación.

Nota: Estoy asumiendo un conocimiento muy básico de jQuery y HTML aquí - al menos asegúrese de que ha leído acerca selectores, métodos, y funciones anónimas.jQuery Tutorial - Introducción: Conceptos básicos & selectoresjQuery Tutorial - Introducción: Conceptos básicos & selectoresLa semana pasada, hablé de la importancia de jQuery es que cualquier desarrollador web moderno y por qué es impresionante. Esta semana, creo que es el momento tenemos en nuestras manos sucias con algo de código y aprendimos ...Lee mas

QTIP

QTIP es una completa información sobre herramientas y etiquetado de plugin para jQuery, con una variedad de estilos. Vamos a utilizar específicamente con la funcionalidad de mapa de imagen, pero que ciertamente no es todo lo que puede hacer. Echar un vistazo a la página plugin para obtener más información o leyendo para empezar.

Hacer un mapa de imagen

Mapas de imagen a sí mismos no son ciertamente una cosa nueva - los elementos de marcado tienen disponibles durante mucho tiempo, y el camino de vuelta en el día en que se considera realmente una buena manera de presentar un sistema de navegación - se puede hacer clic con partes de la imagen con enlaces a diferentes secciones . El mismo código básico mapa de imagen todavía se utiliza para la parte de la funcionalidad, por lo que tendrá que definir que en primer lugar.

Se puede utilizar una variedad de herramientas para crear un mapa de imagen - Adobe Fireworks o Photoshop - pero la más fácil y libre, la solución es una herramienta en línea como éste. Desde luego no es la única herramienta en línea y no me lo hace suyo particular, pero parecía bastante simple de usar - háganoslo saber en los comentarios si encuentra una mejor. Se pueden definir formas rectangulares, circulares, o incluso poligonales.

Vídeo: Como poner galería de imágenes en Movimiento con enlaces código HTML Wep o blog

Comience por subir una imagen - en este caso, voy a etiquetar una captura de pantalla de la página web MakeUseOf. Es posible que deba alejar el zoom para ver la imagen completa en la herramienta.

Debe ser bastante obvio cómo usarlo como un programa básico de la pintura - la única cosa a recordar es que cuando dibujo una forma poli, es necesario mantener SHIFT en el último punto con el fin de cerrar y terminar. Aquí he definido 4 formas.

Cuando esté listo desplazarse hacia abajo y copiar el código dado.

Crear un nuevo documento básico de HTML, y limpiar el código un poco, añadiendo una etiqueta de imagen para que apunte a la imagen original. La forma más sencilla de hacer esto es usar probar un jsFiddle. Aquí está mi muestra, en su estado inicial (el conjunto de código final se da más adelante, no se preocupe).

Recuerde que debe dar la imagen de una usemap atribuir, señalando #carné de identidad del mapa que contiene las coordenadas (usemap =”# myMap”, por ejemplo).

Vídeo: tutorial html, css y jquery | menu dinámico con efecto scroll

Adición en QTIP

Si va a pegar el código en jsFiddle, verá que hay una opción en la barra lateral para incluir jQuery. Asegúrese de que se habilita. También podemos añadir otros recursos externos aquí, así que adelante y añadir las direcciones URL de CSS y JS que aparece en la página de descarga QTIP. Copiar y pegar “todas las características y estilos” enlaces en jsFiddle - aunque en la práctica, se utiliza la herramienta de configuración por debajo de la de construir un conjunto personalizado de características o estilos.

La guía de implementación completo para QTIP se puede encontrar aquí, pero le permite seguir adelante y crear algunos información sobre herramientas basadas en texto simple. El siguiente javascript se dirigirá a todos los elementos de superficie (los artículos que definen las partes de nuestro mapa de imagen) en la carga de la página, diciendo QTIP para trabajar en ellos con el contenido de lo que está en el atributo alt.

ps(documento).Listo(función() {ps("zona").cada(función(índice, elemento) {var enlazar = ps(esta)-ps(enlazar).qtip({contenido: enlazar.attr("alt")})-})-})-

El diseño por defecto es bastante feo - se puede ver una demostración de que aquí - pero eso está bien, vamos a aplicar un diseño personalizado para los pop-ups como este (He omitido una parte del código, mostrando sólo la sección específica QTIP).

ps(enlazar).qtip({contenido: enlazar.attr("alt"),estilo: {clases: `Qtip-bootstrap qtip-sombra`}})-

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

Vídeo: tutorial html 5 y css3 | crear menu horizontal con efecto hover

Una cosa ahora que noto es que por defecto la posición de la parte inferior derecha no es realmente ideal. Para ajustar esto, vamos a utilizar la configuración de la posición:

ps(enlazar).qtip({contenido: enlazar.attr("alt"),estilo: {clases: `Qtip-bootstrap qtip-sombra`},posición: {objetivo: `ratón`,ajustar: {ratón: cierto // se puede omitir (por ejemplo, el comportamiento por defecto)}}})-})-

Ahora coloca el cursor sobre cualquier elemento, y la información sobre herramientas se seguirá el ratón. Puede ver la demostración acabada aquí.

Vídeo: HTML5 CSS3 jQuery Fondo Imagen Autoajustable

También puede hacer que el modal emergente (por lo que todo lo demás está atenuado de distancia, y hay que hacer clic fuera a volver a ella), o incluso cargar en algunos contenidos a través de una petición AJAX. Creo que es un plugin poco bastante limpio que da nueva vida a un estándar HTML bastante inusitado - vamos a ver lo que puede venir, y no por favor, háganoslo saber en los comentarios si has hecho algo con él.