[Article] Une image map avec des infobulles CSS3 et jQuery

Bovino · 17/10/2012, 21h15

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.

Une image map avec des infobulles CSS3 et jQuery.

Des infobulles en CSS3.

cornnery · 19/10/2012, 11h11

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

Seb33300 · 24/10/2012, 12h24

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/

wallas07 · 27/10/2012, 16h22

Un très bon article, merci pour le partage

Masamune56 · 05/11/2012, 22h49

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.

Bovino · 06/11/2012, 07h50

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.

17/10/2012, 21h15	#1
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 135 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 135 Points : 64 942 Points : 64 942	Une image map avec des infobulles CSS3 et jQuery 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. Une image map avec des infobulles CSS3 et jQuery. Des infobulles en CSS3. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	40

24/10/2012, 12h24	#3
Seb33300 Membre Expert Sébastien Alfaiate Développeur Web Inscription : janvier 2007 Messages : 1 428 Détails du profil Informations personnelles : Nom : Sébastien Alfaiate Âge : 27 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : janvier 2007 Messages : 1 428 Points : 1 913 Points : 1 913	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/ __________________ Zend Certified Engineer PHP 5.3 « Crois-tu comprendre le monde juste en matant le 20H Ou connaître l'histoire en ayant lu que l'angle des vainqueurs ? » Keny Arkana
	00

06/11/2012, 07h50	#6
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 135 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 135 Points : 64 942 Points : 64 942	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. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

19/10/2012, 11h11	#2
cornnery Candidat au titre de Membre du Club Inscription : juillet 2007 Messages : 64 Détails du profil Informations forums : Inscription : juillet 2007 Messages : 64 Points : 13 Points : 13	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
	00

27/10/2012, 16h22	#4
wallas07 Nouveau Membre du Club Wallas William Consultant informatique Inscription : août 2009 Messages : 20 Détails du profil Informations personnelles : Nom : Wallas William Âge : 29 Localisation : France Informations professionnelles : Activité : Consultant informatique Secteur : Conseil Informations forums : Inscription : août 2009 Messages : 20 Points : 28 Points : 28	Un très bon article, merci pour le partage
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email