Une image map avec des infobulles CSS3 et jQuery

:salut:

Je vous propose une traduction de l'article anglophone de Catalin Rosu : Image map with CSS3 & jQuery tooltips.

Cet article vous montre comment afficher des infobulles CSS3 (avec un brin de jQuery) sur une image mappée en HTML.

Bien entendu, les suggestions, commentaires ou propositions d'améliorations sont les bienvenus.

:fleche: Une image map avec des infobulles CSS3 et jQuery.
:fleche: Des infobulles en CSS3.

Bonjour Bovino ,

merci pour ce travail , je souhaiterais savoir comment ne pas afficher les images au préalable tel que c'est présenté .
Mais juste afficher le tooltip au passage de la souris, sur les coordonnées où l'on souhaite afficher une légende .
Merci

Pour info, il existe un plugin jquery qui permet d'afficher des tooltips sur tout type d'élément y compris les images map :

http://craigsworks.com/projects/qtip2/

Un très bon article, merci pour le partage :ccool:

Citation:

---

Envoyé par cornnery

Bonjour Bovino ,

merci pour ce travail , je souhaiterais savoir comment ne pas afficher les images au préalable tel que c'est présenté .
Mais juste afficher le tooltip au passage de la souris, sur les coordonnées où l'on souhaite afficher une légende .
Merci

---

JQueryUI.com intégre d'office un plugin pour les infobulles.

Oui (à condition d'avoir migré vers UI 1.9), mais ce n'était pas le cas lors de l'écriture (et de la traduction) de cet article.
Ensuite, nul besoin de UI pour faire fonctionner le code donné, jQuery suffit amplement.
Enfin, le but de l'article est aussi de montrer comment on fait, pas uniquement à donner un code juste pour du copier / coller.