IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Publications (X)HTML et CSS Discussion :

Une image map avec des infobulles CSS3 et jQuery


Sujet :

Publications (X)HTML et CSS

  1. #1
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut 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.

  2. #2
    Membre du Club
    Profil pro
    Ingénieur
    Inscrit en
    Juillet 2007
    Messages
    65
    Détails du profil
    Informations personnelles :
    Localisation : Congo-Brazzaville

    Informations professionnelles :
    Activité : Ingénieur

    Informations forums :
    Inscription : Juillet 2007
    Messages : 65
    Points : 51
    Points
    51
    Par défaut
    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

  3. #3
    Membre émérite
    Avatar de Seb33300
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2007
    Messages
    1 564
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Thaïlande

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Janvier 2007
    Messages : 1 564
    Points : 2 399
    Points
    2 399
    Par défaut
    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/

  4. #4
    Nouveau membre du Club Avatar de wallas07
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Août 2009
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2009
    Messages : 20
    Points : 28
    Points
    28
    Par défaut
    Un très bon article, merci pour le partage

  5. #5
    Membre à l'essai
    Homme Profil pro
    Webmaster
    Inscrit en
    Octobre 2012
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Octobre 2012
    Messages : 29
    Points : 12
    Points
    12
    Par défaut
    Citation Envoyé par cornnery Voir le message
    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.

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    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.

Discussions similaires

  1. [CSS 3] Une image map avec des infobulles CSS3 et jQuery
    Par Bovino dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 06/11/2012, 08h50
  2. [CakePHP] Valider un formulaire avec une image map
    Par pausg dans le forum Bibliothèques et frameworks
    Réponses: 1
    Dernier message: 26/11/2010, 13h33
  3. découper une image pour réaliser des liens avec css
    Par regh12 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 07/04/2010, 02h19
  4. Réponses: 2
    Dernier message: 02/02/2008, 20h04

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo