Créer des étiquettes d'image interactives avec qTip (plugin jQuery)

Les images peuvent être plutôt sans vie et ennuyeuses - à moins d'être interactives et géniales, c'est-à-dire. Et qTip facilite les choses, avec la puissance de jQuery. Poursuivez votre lecture pour savoir comment ajouter des étiquettes interactives lorsque l'utilisateur survole une partie de l'image..

Pourquoi voudriez-vous faire cela? Personnellement, j'utilise la technique dans un nouveau site de commerce électronique - afin que l'utilisateur puisse survoler les éléments d'une scène (comme un catalogue Ikea), avec le titre du produit et le bouton d'ajout au panier qui apparaissent dynamiquement. Il pourrait également être utilisé à bon escient sur un site tel qu'une carte de campus ou de ville, où de nombreux éléments de forme inhabituelle pourraient vraiment être associés à une description sans encombrer la carte. Un exemple très simple serait également les balises Facebook, où survoler le visage d'une personne vous dira qui il est. Ses utilisations ne sont limitées que par votre imagination.

Remarque: je suppose ici des connaissances de base de jQuery et HTML - au moins, assurez-vous d'avoir lu tout sur les sélecteurs Tutoriel jQuery - Mise en route: principes de base et sélecteurs Tutoriel jQuery - Démarrage: bases et sélecteurs La semaine dernière, j'ai parlé de Quelle est l'importance de jQuery pour tout développeur Web moderne et pourquoi il est génial. Cette semaine, je pense qu’il est temps de se salir les mains avec du code et d’apprendre comment… Read More, méthodes Introduction à jQuery (Partie 2): Méthodes et fonctions Introduction à jQuery (Partie 2): Méthodes et fonctions Ceci fait partie d'un initiation continue à la série de programmation Web jQuery. La première partie couvrait les bases de jQuery sur la manière de l'inclure dans votre projet et les sélecteurs. Dans la partie 2, nous poursuivrons avec… Lire la suite et les fonctions anonymes Introduction à jQuery (Partie 3): Attendre la page à charger et fonctions anonymes Introduction à jQuery (Partie 3): Attendre la page à charger et fonctions anonymes jQuery est sans doute une compétence essentielle pour le développeur Web moderne, et dans cette courte mini-série, j'espère vous donner les connaissances nécessaires pour commencer à l'utiliser dans vos propres projets Web. Dans… Lire la suite .

qTip

qTip est un plug-in complet pour les étiquettes d'aide et les étiquettes pour jQuery, avec une variété de styles. Nous allons l'utiliser spécifiquement avec la fonctionnalité de carte d'image, mais ce n'est certainement pas tout ce qu'il peut faire. Jetez un coup d'œil à la page du plugin pour en savoir plus, ou poursuivez votre lecture pour commencer.

Faire une carte d'image

Les cartes-images elles-mêmes ne sont certainement pas une nouveauté - les éléments de balisage sont disponibles depuis longtemps et, à l'époque, c'était considéré comme un bon moyen de présenter un système de navigation - avec des parties cliquables de l'image reliées à différentes sections . Le même code de carte-image de base est toujours utilisé pour cette partie de la fonctionnalité, nous devrons donc définir cette première.

Vous pouvez utiliser divers outils pour créer une carte-image - Adobe Fireworks ou Photoshop -, mais la solution la plus simple et la plus gratuite est un outil en ligne comme celui-ci. Ce n’est certainement pas le seul outil en ligne et je ne l’approuve pas particulièrement, mais il semblait assez simple à utiliser - faites-le-nous savoir dans les commentaires si vous en 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 étiqueter une capture d'écran du site Web MakeUseOf. Vous devrez peut-être effectuer un zoom arrière pour afficher votre image complète dans l'outil..

Il devrait être assez évident de l’utiliser comme un programme de peinture de base - la seule chose à retenir est que, lorsque vous dessinez une forme poly, vous devez maintenir SHIFT sur le dernier point pour fermer et terminer. Ici j'ai défini 4 formes.

Lorsque vous êtes prêt, faites défiler et copiez le code donné.

Créez un nouveau document HTML de base et nettoyez un peu le code en ajoutant une balise d'image pour qu'elle pointe vers votre image d'origine. La méthode la plus simple consiste à utiliser un JSFiddle. Voici mon exemple, dans son état initial (le code final est donné plus tard, ne vous inquiétez pas).

N'oubliez pas de donner à l'image un plan du site attribut, pointant vers #id de la carte contenant les coordonnées (usemap =”#mymap”, par exemple).

Ajout dans qTip

Si vous avez collé votre code chez JSFiddle, vous verrez qu'il y a une option dans la barre latérale pour inclure jQuery. Assurez-vous de l'activer. Nous pouvons également ajouter d'autres ressources externes ici, alors n'hésitez plus et ajoutez les URL pour CSS et JS répertoriées sur la page de téléchargement de qTip. Copier et coller le “toutes les caractéristiques et styles” liens dans JSFiddle - bien qu'en pratique, vous utilisiez l'outil de configuration ci-dessous pour créer un ensemble personnalisé de fonctionnalités ou de styles.

Le guide complet d'implémentation de qTip se trouve ici, mais allons de l'avant et créons quelques info-bulles simples à base de texte. Le code Javascript suivant ciblera tous les éléments de zone (les éléments qui définissent les parties de notre carte d’image) lors du chargement de la page, en indiquant à qTip de les manipuler avec le contenu de l’attribut alt..

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

Le design par défaut est assez moche - vous pouvez en voir une démonstration ici - mais ce n'est pas grave, appliquons un design personnalisé aux fenêtres contextuelles comme celle-ci. (J'ai omis une partie du code, affichant uniquement la section spécifique à qTip).

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

J'ai également inclus le fichier CSS BootStrap en tant que fichier externe, pour trier les polices de navigateur standard laides. C'est vraiment exagéré, je sais. Encore: beaucoup mieux!

Une chose que je remarque maintenant est que la position par défaut en bas à droite n’est pas vraiment idéale. Pour ajuster cela, utilisons le paramètre de position:

$ (link) .qtip (content: link.attr ("alt"), style: classes: 'qtip-bootstrap qtip-shadow', position: cible: 'souris', ajuster: souris: vrai / / Peut être omis (par exemple, comportement par défaut)); ); 

Maintenant, survolez n'importe quel élément, et l'info-bulle suivra votre souris. Vous pouvez voir la démo terminée ici.

Vous pouvez également rendre la fenêtre contextuelle modale (pour que tout le reste soit estompé et que vous deviez cliquer à l'extérieur pour y revenir), ou même charger du contenu via une requête AJAX. Je pense que c'est un joli petit plugin qui insuffle une nouvelle vie à un standard HTML assez inutilisé - voyons ce que vous pouvez en dire et faites-le-nous savoir dans les commentaires si vous avez fait quelque chose avec..

En savoir plus sur: jQuery, portfolio en ligne, partage de photos.