info bulle pour définition d'un mot

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu info bulle pour définition d'un mot

Message par massya le Lun 18 Aoû 2014 - 22:19

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.


Dernière édition par massya le Jeu 21 Aoû 2014 - 23:54, édité 2 fois

massya
*

Messages : 32
Inscrit(e) le : 25/05/2012

http://clubdesmouslimettes.lebonforum.com
massya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: info bulle pour définition d'un mot

Message par Kinotto le Lun 18 Aoû 2014 - 22:38

Bonsoir,

Il s'agit d'un système d'infobulle. Vous pouvez par exemple utiliser ce code :

Arrow 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;
}

Arrow 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. Wink


Cordialement.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: info bulle pour définition d'un mot

Message par massya le Lun 18 Aoû 2014 - 23:12

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

massya
*

Messages : 32
Inscrit(e) le : 25/05/2012

http://clubdesmouslimettes.lebonforum.com
massya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: info bulle pour définition d'un mot

Message par Kinotto le Mar 19 Aoû 2014 - 0:46

Re,

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. Smile

Cordialement.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: info bulle pour définition d'un mot

Message par massya le Mar 19 Aoû 2014 - 1:28

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

massya
*

Messages : 32
Inscrit(e) le : 25/05/2012

http://clubdesmouslimettes.lebonforum.com
massya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: info bulle pour définition d'un mot

Message par Kinotto le Mar 19 Aoû 2014 - 15:26

Bonjour,

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.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: info bulle pour définition d'un mot

Message par massya le Jeu 21 Aoû 2014 - 23:53

Bonsoir,

Après essai, ça marche !
Je vous remercie encore;
Je me suis permise de changer le titre du message, plus explicite...

Cordialement

massya
*

Messages : 32
Inscrit(e) le : 25/05/2012

http://clubdesmouslimettes.lebonforum.com
massya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: info bulle pour définition d'un mot

Message par Kinotto le Ven 22 Aoû 2014 - 0:46

Je vous en prie, bonne continuation Wink.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum