J'ai une image et sur elle sont des logos (c'est une carte), je veux avoir une petite boîte contextuelle avec des informations sur l'emplacement de ce logo lorsque l'utilisateur déplace leur souris sur ledit logo. Est-ce que je peux le faire sans utiliser un framework javascript et si oui, y at-il de petites bibliothèques/scripts qui me permettent de faire une telle chose?Info-bulles sur une image
Oui, vous pouvez le faire sans Javascript. Utilisez une carte d'image HTML, avec des attributs de titre, comme celui-ci:
<img usemap="#logo" src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png">
<map name="logo">
<area shape="rect" href="" coords="52,42,121,65" title="Stack">
<area shape="rect" href="" coords="122,42,245,65" title="Overflow">
</map>
Le débordement de pile logo fait référence à la image map, qui définit un rectangle pour chacun des deux mots en utilisant une balise area. Chaque élément area de la balise title spécifie le texte que les navigateurs affichent généralement sous la forme d'une info-bulle. L'attribut shape peut également spécifier un cercle ou un polygone.
Une seule image ne donne pas au navigateur les informations sémantiques sur les logos à l'intérieur. Vous pouvez utiliser un image map pour fournir les coordonnées. Pour atteindre les info-bulles, appliquez simplement un attribut title à chaque lien. Pour des infobulles plus sophistiquées (style, lignes multiples, etc.), vous aurez besoin de quelque chose d'inhabituel, tel que UniTip.
MooTools a un script astucieux pour cela. Voir MooTools Tips. Léger sur le HTML aussi. Il s'agit d'un demo de la version 1.11.
L'attribut title est la solution la plus simple et garanti au travail, et gracieusement pour useragents avilissent qui ne supportent pas correctement.
En effet Mootools est l'un des nombreux cadres
qui vous permettent d'ajouter des fonctionnalités à tout élément sur
votre page Web. Voici un lien vers un petit tutoriel.
http://mootorial.com/wiki/mootorial/08-plugins/03-interface/01-tips
Mootools est pas vraiment un type de cadre de copier-coller,
il vous encourage à regarder par-dessus le code fourni et
Réaliser votre propre solution avec d'excellents exemples.
Vous pouvez essayer le widget javascript au http://www.taggify.net/. Le script permet d'ajouter des infobulles pour la partie de l'image - lorsque l'utilisateur déplace la souris sur la zone de la photo, l'infobulle du script affiche la bordure autour de la région et atténue les autres parties. Chose cool pour marquer les gens sur la photo. Voir démo au http://www.taggify.net/demo.aspx
vous pouvez utiliser l'attribut title pour une info-bulle simple. Cela fonctionne sur presque tous les objets DOM.