Faire des étiquettes d`images interactives avec qtip (plugin jquery)

Les images peuvent être assez ennuyeux et sans vie - à moins qu`ils sont interactifs et impressionnant, c`est. Et Qtip rend cela facile, avec la puissance de jQuery. Poursuivez votre lecture pour savoir comment vous pouvez ajouter des étiquettes interactives qui apparaissent lorsque l`utilisateur passe au-dessus des parties d`une image.

Pourquoi voudriez-vous faire cela? Personnellement, j`utilise la technique dans un nouveau site de commerce électronique - afin que l`utilisateur peut en vol stationnaire sur des éléments d`une scène (comme un catalogue Ikea), avec le titre de produit et l`ajouter au bouton de panier apparaissant dynamiquement. Il pourrait également être utilisé à bon escient sur quelque chose comme un campus ou d`une carte ville, où il y a beaucoup d`éléments de forme étrange qui pourrait vraiment faire avec une description sans encombrer la carte. Un exemple très simple serait également facebook, où planant au-dessus d`une personne face à vous dire qui ils sont. Ses utilisations sont limitées que par votre imagination.

Note: Je suppose une connaissance de base de jQuery et HTML ici - au moins assurez-vous que vous avez lu au sujet sélecteurs, méthodes, et fonctions anonymes.jQuery Tutorial - Mise en route: Principes de base & SelectorsjQuery Tutorial - Mise en route: Principes de base & SelectorsLa semaine dernière, j`ai parlé de l`importance jQuery est à tout développeur web moderne et pourquoi il est génial. Cette semaine, je pense qu`il est temps que nous avons nos mains sales avec un code et appris comment ...Lire la suite

Qtip

Qtip est une info-bulle complète et plug-in pour l`étiquetage jQuery, avec une variété de styles. Nous allons utiliser spécifiquement avec la fonctionnalité de carte d`image, mais c`est certainement pas tout ce qu`il peut faire. Jetez un oeil à la page du plugin pour en savoir plus, ou à lire pour commencer.

Faire une image cliquable

Image cartes elles-mêmes ne sont certainement pas une chose nouvelle - les éléments de balisage ont disponibles depuis longtemps, et retour dans la journée, il a été effectivement considéré comme une bonne façon de présenter un système de navigation - avec cliquables parties de l`image reliant aux différentes sections . Le même code de carte d`image de base est toujours utilisée pour cette partie de la fonctionnalité, donc nous devons définir ce premier.

Vous pouvez utiliser une variété d`outils pour créer une carte d`image - Adobe Fireworks ou Photoshop - mais le plus facile et libre, la solution est un outil en ligne comme celui-ci. Il est certainement pas le seul outil en ligne et je ne suis pas approuver particulièrement, mais il semblait assez simple à utiliser - laissez-nous savoir dans les commentaires si vous trouvez un meilleur. Vous pouvez définir des formes rectangulaires, circulaires, ou même polygonales.

Commencez par télécharger une image - dans ce cas, je vais marquer une capture d`écran du site MakeUseOf. Vous devrez peut-être effectuer un zoom arrière pour voir l`image complète dans l`outil.

Il devrait être assez évident comment l`utiliser comme un programme de peinture de base - la seule chose à retenir est que lors de l`élaboration d`une forme poly, vous devez maintenir SHIFT sur le dernier point afin de fermer et de finition. Ici, j`ai défini 4 formes.

Lorsque vous êtes prêt défiler vers le bas et copiez le code donné.

Video: Aprendiendo jQuery: Conociendo el Plugin jQuery Mixitup

Créer un nouveau document HTML de base, et nettoyer le code un peu, en ajoutant une balise d`image pour pointer vers votre image originale. La meilleure façon de le faire tester est d`utiliser un jsFiddle. Voici mon exemple, dans son état initial (le jeu de code final est donné plus tard, ne vous inquiétez pas).

Rappelez-vous de donner l`image d`un usemap attribuer, en montrant #id du plan contenant les coordonnées (usemap = » # mymap », par exemple).

Ajout dans Qtip

Si vous êtes collé à votre code jsFiddle, vous verrez qu`il ya une option sur la barre latérale pour inclure jQuery. Assurez-vous d`activer cela. Nous pouvons également ajouter d`autres ressources externes ici, alors allez-y et ajoutez les URL pour CSS et JS figurant sur la page de téléchargement Qtip. Copiez et collez les « toutes les fonctionnalités et styles » liens dans jsFiddle - bien que dans la pratique, vous pouvez utiliser l`outil de configuration ci-dessous que pour construire un ensemble personnalisé de fonctionnalités ou de styles.

Le guide de mise en œuvre complète de Qtip se trouve ici, mais laisse aller de l`avant et de créer des infobulles à base de texte simple. Ce qui suit javascript ciblera tous les éléments de surface (les articles qui définissent les parties de notre plan d`image) sur chargement de la page, en disant Qtip de travailler sur eux avec le contenu de ce qui est dans l`attribut alt.

$(document).prêt(fonction() {$("région").chaque(fonction(indice, élément) {var lien = $(ce)-$(lien).qtip({contenu: lien.attr("alt")})-})-})-

Video: Plugin jQuery- Bootstrap File Input, subir archivos al servidor

La conception par défaut est assez laid - vous pouvez voir une démo de celui-ci ici - mais c`est ok, nous allons appliquer un design personnalisé aux popups comme celui-ci (Je l`ai omis une partie du code, ne montrant que la section spécifique Qtip).

$(lien).qtip({contenu: lien.attr("alt"),style: {Des classes: `Qtip-ombre qtip-bootstrap`}})-

J`ai aussi inclus la BootStrap CSS fichier en tant que fichier externe, pour trier les polices standard du navigateur laid. Ceci est très exagéré, je sais. Encore: beaucoup mieux!

Une chose que je remarque maintenant que par défaut de position en bas à droite est pas vraiment idéal. Pour régler cela, nous allons utiliser le réglage de la position:

$(lien).qtip({contenu: lien.attr("alt"),style: {Des classes: `Qtip-ombre qtip-bootstrap`},position: {cible: `Souris`,régler: {Souris: vrai // peut être omis (par exemple le comportement par défaut)}}})-})-

Maintenant, passez la souris sur un élément, et l`info-bulle suivra votre souris. Vous pouvez voir la démo terminée ici.

Vous pouvez également faire le modal pop-up (si tout le reste est estompé loin, et vous devez cliquer sur l`extérieur pour y revenir), ou même charger un contenu par le biais d`une requête AJAX. Je pense qu`il est un petit plugin assez propre qui insuffle une nouvelle vie dans une norme HTML assez utilisé - nous allons voir ce que vous pouvez venir, et ne laissez-nous s`il vous plaît savoir dans les commentaires si vous avez fait quelque chose avec elle.