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

Publicité

Les images peuvent être assez sans vie et ennuyeuses - à moins qu’elles ne soient interactives et impressionnantes, c’est-à-dire. Et qTip rend cela facile, avec la puissance de jQuery. Lisez la suite pour savoir comment ajouter des étiquettes interactives qui apparaissent lorsque l'utilisateur survole des parties d'une image.

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

Remarque: je suppose une connaissance très basique de jQuery et HTML ici - assurez-vous au moins d'avoir lu sélecteurs Tutoriel jQuery - Prise en main: bases et sélecteursLa semaine dernière, j'ai parlé de 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 nous salir les mains avec du code et d'apprendre comment ... Lire la suite , les méthodes Introduction à jQuery (Partie 2): Méthodes et fonctionsCela fait partie d'une introduction continue aux débutants de la série de programmation Web jQuery. La partie 1 a couvert les bases de jQuery sur la façon de l'inclure dans votre projet et les sélecteurs. Dans la partie 2, nous allons continuer avec ... Lire la suite , et fonctions anonymes Introduction à jQuery (partie 3): attente de chargement de la page et fonctions anonymesjQuery 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 .

coton tige

qTip est une info-bulle complète et un plugin d'étiquetage pour jQuery, avec une variété de styles. Nous l’utiliserons spécifiquement avec la fonctionnalité de carte d’image, mais ce n’est certainement pas tout ce qu’il peut faire. Jetez un oeil à la page du plugin pour en savoir plus, ou lisez la suite pour commencer.

Création d'une carte d'images

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

Vous pouvez utiliser une variété d'outils pour créer une carte d'image - Adobe Fireworks ou Photoshop - mais la solution la plus simple et 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-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 afin de fermer et terminer. Ici, j'ai défini 4 formes.

Lorsque vous êtes prêt, faites défiler vers le bas 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 pointer vers votre image d'origine. La façon la plus simple de tester cela consiste à utiliser un JSFiddle. Voici mon échantillon, dans son état initial (le jeu de codes final est donné plus tard, ne vous inquiétez pas).

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

Ajout dans qTip

Si vous avez collé votre code sur JSFiddle, vous verrez 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 allez-y et ajoutez les URL pour CSS et JS répertoriées sur la page de téléchargement de qTip. Copiez et collez les liens «toutes les fonctionnalités et tous les styles» dans JSFiddle - bien qu'en pratique, vous utiliseriez l'outil de configuration ci-dessous pour créer un ensemble personnalisé de fonctionnalités ou de styles.

Le guide d'implémentation complet de qTip peut être trouvé ici, mais allons de l'avant et créons des info-bulles simples basées sur du texte. Le Javascript suivant ciblera tous les éléments de la zone (les éléments qui définissent les parties de notre image map) au chargement de la page, en disant à qTip de travailler dessus avec le contenu de tout ce qui est dans l'attribut alt.

$ (document) .ready (fonction () { $ ("zone"). each (fonction (index, élément) { var link = $ (this); $ (lien) .qtip ({ contenu: link.attr ("alt") }); }); });

La conception par défaut est assez moche - vous pouvez en voir une démo ici - mais ça va, appliquons un design personnalisé aux popups comme celui-ci (J'ai omis une partie du code, affichant uniquement la section spécifique qTip).

$ (lien) .qtip ({ contenu: link.attr ("alt"), style: { classes: 'qtip-bootstrap qtip-shadow' } });

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

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

$ (lien) .qtip ({ contenu: link.attr ("alt"), style: { classes: 'qtip-bootstrap qtip-shadow' }, position: { cible: "souris", ajustez: { mouse: true // Peut être omis (par exemple, comportement par défaut) } } }); });

Survolez maintenant 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 le popup modal (donc tout le reste est grisé, et vous devez cliquer à l'extérieur pour y revenir), ou même charger du contenu via une demande AJAX. Je pense que c'est un petit plugin assez soigné qui insuffle une nouvelle vie à un standard HTML assez inutilisé - voyons ce que vous pouvez proposer et faites-le nous savoir dans les commentaires si vous avez fait quelque chose avec il.