info bulle pour définition d'un mot
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
info bulle pour définition d'un mot
Bonjour,
Existe-t-il un moyen de créer une petite fenêtre pop up qui apparaitrait lorsque l'on clique ou l'on passe sur un mot pour avoir sa définition?
Si oui quelles seraient les étapes pour réaliser ça ?
Merci d'avance pour votre aide.
Existe-t-il un moyen de créer une petite fenêtre pop up qui apparaitrait lorsque l'on clique ou l'on passe sur un mot pour avoir sa définition?
Si oui quelles seraient les étapes pour réaliser ça ?
Merci d'avance pour votre aide.
Dernière édition par massya le Jeu 21 Aoû 2014 - 23:54, édité 2 fois
Re: info bulle pour définition d'un mot
Bonsoir,
Il s'agit d'un système d'infobulle. Vous pouvez par exemple utiliser ce code :
Dans Panneau d'Administration => Affichage => Images et couleurs => Couleurs => Onglet "Feuille de style CSS"
Le code HTML
Au passage de la souris sur le texte, une infobulle apparaît.
Bien sûr, le code CSS est personnalisable. Il vous suffit de suivre les annotations.
Cordialement.
Il s'agit d'un système d'infobulle. Vous pouvez par exemple utiliser ce code :
Dans Panneau d'Administration => Affichage => Images et couleurs => Couleurs => Onglet "Feuille de style CSS"
- Code:
a.info {
position: relative;
color: black;
text-decoration: none;
border-bottom: 1px gray dotted; /* On souligne le texte. */
}
a.info span {
display: none; /* On masque l'infobulle. */
}
a.info:hover {
background: none; /* Correction d'un bug d'Internet Explorer. */
z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}
a.info:hover span {
display: inline; /* On affiche l'infobulle. */
position: absolute;
white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */
top: 30px; /* On positionne notre infobulle. */
left: 20px;
background: white;
color: green;
padding: 3px;
border: 1px solid green;
border-left: 4px solid green;
}
Le code HTML
- Code:
<a href="#" class="info">Texte du lien<span>Définition en infobulle</span></a>
Au passage de la souris sur le texte, une infobulle apparaît.
Bien sûr, le code CSS est personnalisable. Il vous suffit de suivre les annotations.
Cordialement.
Invité- Invité
Re: info bulle pour définition d'un mot
Merci Kinotto,
Je suis vraiment débutante, alors désolée d'avance si mes questions sont bêtes...
Je ne suis pas sûre de ce que je dois changer (annotations).
Puis je avoir un exemple concret, svp?
Cordialement
Je suis vraiment débutante, alors désolée d'avance si mes questions sont bêtes...
Je ne suis pas sûre de ce que je dois changer (annotations).
Puis je avoir un exemple concret, svp?
Cordialement
Re: info bulle pour définition d'un mot
Re,
Par exemple, si vous voulez donner la définition du mot psychosomatique, il vous suffit de remplacer
Par :
Sans oublier bien sûr d'insérer le code CSS communiqué plus haut.
Cordialement.
Par exemple, si vous voulez donner la définition du mot psychosomatique, il vous suffit de remplacer
- Code:
<a href="#" class="info">Texte du lien<span>Définition en infobulle</span></a>
Par :
- Code:
<a href="#" class="info">Psychosomatique<span>Maladie caractérisée par des symptômes physiques dont les causes sont multiples, mais où des facteurs émotionnels jouent un rôle important. Elle affecte habituellement un organe ou un système physiologique. Les manifestations physiologiques sont celles qui accompagnent normalement certaines émotions, mais elles sont plus intenses et plus prolongées. Des émotions réprimées ont une action physiologique qui, si elle est durable et suffisamment intense, peut amener des perturbations de la fonction, voire une lésion de l'organe. Le malade n'est pas conscient de la relation qui existe entre sa maladie et ses émotions.</span></a>
Sans oublier bien sûr d'insérer le code CSS communiqué plus haut.
Cordialement.
Invité- Invité
Re: info bulle pour définition d'un mot
ok, super, merci.
Je pense avoir compris.
Pour chaque mot, je change le code html dans mes messages. Et pour le CSS, je peux faire des changements pour l'apparence de ma bulle, c'est ça?
Mais est-ce que la bulle apparaitra seulement en passant sur le mot du message ou dans les autres messages écrits ailleurs aussi ?
Cordialement
Je pense avoir compris.
Pour chaque mot, je change le code html dans mes messages. Et pour le CSS, je peux faire des changements pour l'apparence de ma bulle, c'est ça?
Mais est-ce que la bulle apparaitra seulement en passant sur le mot du message ou dans les autres messages écrits ailleurs aussi ?
Cordialement
Re: info bulle pour définition d'un mot
Bonjour,
Exactement !
Seulement sur le mot du message, il faut insérer un code pour chaque mot.
Cordialement.
Et pour le CSS, je peux faire des changements pour l'apparence de ma bulle, c'est ça?
Exactement !
Mais est-ce que la bulle apparaitra seulement en passant sur le mot du message ou dans les autres messages écrits ailleurs aussi ?
Seulement sur le mot du message, il faut insérer un code pour chaque mot.
Cordialement.
Invité- Invité
Re: info bulle pour définition d'un mot
Bonsoir,
Après essai, ça marche !
Je vous remercie encore;
Je me suis permise de changer le titre du message, plus explicite...
Cordialement
Après essai, ça marche !
Je vous remercie encore;
Je me suis permise de changer le titre du message, plus explicite...
Cordialement
Re: info bulle pour définition d'un mot
Je vous en prie, bonne continuation .
Invité- Invité
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum