creer une info bulle

obtenir ces boutons

Créer une info-bulle à coins arrondis

Passer au-dessus de ces mots d'un texteAffichage d'une info-bulle au passage de la souris avec le curseur de la souris. Une petite fenêtre explicative (appelée "info-bulle") apparaîtra en-dessous de ces mots.

Les coins de l'info-bulle sont arrondis (sauf pour Internet Explorer avant la version 9).

Pour obtenir cela, il faut encoder ces mots comme suit dans la version HTML du message :

<a class="infobulle">ces mots d'un texte<span>Affichage d'une info-bulle au passage de la souris</span></a>

La phrase qui apparait dans l'info-bulle doit être insérée entre les balises <span> et </span>.

Préalablement il faudra avoir ajouté en début de message ou (pour tous les messages) dans un gadget HTML/JavaScript, le code suivant :

<style type="text/css">a.infobulle{position:relative;z-index:24;color:#C00;text-decoration:none;border-bottom: 1px dotted;font-weight: bold; }a.infobulle:hover{z-index:25;}a.infobulle span{display: none}a.infobulle:hover span{display:inline;position:absolute;top:25px; border:3px solid red;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;background-color:orange;color:#000;font-weight:normal;padding:5px;width:250px;}</style>

On peut modifier le code en fonction de ses besoins :
- la largeur de l'info-bulle est déterminée par "250px" (tout à la fin du code);
- si on supprime "width:250px;", le bord droit de l'info-bulle se trouvera au même niveau que le bord droit des mots soulignés dans le texte;
- pour aligner l'info-bulle sur la gauche du message, remplacer "display:inline" par "display:block" au début de la dernière instruction (a.infobulle:hover span) ;
- la présentation des mots dans le texte figure dans la première instruction; elle peut être modifiée ou complétée;
- la présentation de la phrase dans l'info-bulle figure dans la dernière instruction (a.infobulle:hover span) ; elle peut être modifiée ou complétée.

Pour éviter que l'info-bulle ne s'affiche à droite en partie à l'extérieur du message, on peut créer un second code (infobulle2 par exemple) pour pouvoir afficher l'info-bulle en partie à gauche ou à droite des mots soulignés, en fonction de la position de ces derniers.

Pour voir l'info-bulle alignée sur la gauche du message, passer avec le curseur de la souris au-dessus de ces motsAffichage d'une info-bulle au passage de la souris.

* * * * *

Info-bulle simplifiée :

Passer au-début de ces mots d'un texte avec le curseur de la souris.

Le code utilisé est : <a title="Affichage d'une info-bulle au passage de la souris" style="color:#C00;text-decoration:none;border-bottom: 1px dotted;font-weight: bold;">ces mots d'un texte</a>

On utilise la balise "title" dont la présentation ne peut pas être modifiée.

On peut remplacer le texte à l'écran ("ces mots d'un texte") par une image : comme ceci : <a title="texte de l'infobulle"><img src="adresse de l'image" /></a>

24 commentaires:

Jamin'Noize a dit…

Bonjour, est-il possible de faire une info bulle sur une image?

Meiser a dit…

Bonjour.

Sans problème.

Il suffit de remplacer dans le texte ci-dessus "ces mots d'un texte" par : <img src="adresse de l'image" />


Jamin'Noize a dit…

Merci, ça marche c'est impecable. La preuve http://distorsong.blogspot.fr sur le premier post! Vous m'avez aussi aidé à centrer l'image de mon blog, chapeau bas!

gaston a dit…

Bonjour,

Comment ajouter un code pour modifier la police, couleur, taille, du mot "ces mots d'un texte" entre > et <

Meiser a dit…

Bonjour.

1) Couleur : changer "color:#C00;" et ajouter à côté tous les codes voulus : police, taille, ...
2) "ces mots d'un texte" peut être remplacé par n'importe quel texte.


gaston a dit…

Bonjour,

Merci pour ces précieuses infos...

Enzo Youx a dit…

Je n'arrive pas a changer la couleur de fond : comment on dois faire ?

Meiser a dit…

Bonjour.

Corriger :

background-color:orange;

On peut mettre une couleur ou un code.


GAVOT SOLIDARITÉ a dit…

je n'arrive pas à mettre l'info bulle.
Je dispose le code : (style ...... /style) en début de texte puis l'encodage à la suite avec mon texte à la place des exemples.
j'ai bien une info-bulle, mais quand je reviens sur "rédiger" (sorti du HTML) ça détruit tout et je n'ai plus d'infobulle.

Peut-être que je ne met pas les codes à la bonne place ? Faut-il les mettre à l'intérieur du message (style ... /style) ? comment intégrer ces différents codes ,

Meiser a dit…

Bonjour.
Je ne sais pas si cela apparaît en mode "rédiger" que je n'utilise jamais.
Il faudrait publier le message juste après l'avoir modifié en HTML.
Vous avez aussi la possibilité de mettre le "style" dans un gadget HTML/JavaScript, ce qui vous servira pour tous les messages.


GAVOT SOLIDARITÉ a dit…
Ce commentaire a été supprimé par l'auteur.
GAVOT SOLIDARITÉ a dit…

Cela se passe quand je quitte l'article et que je reviens dessus en mode "rédiger" (pour rajouter un élément plus facilement par exemple) Si je revient dessus en HTML, rien ne bouge.
Ce qui est bizarre c'est que dans d'autres fonctions je peux basculer "HTML-Rédiger" sans bousculer mon script.

Dans le cas présent (et uniquement pour infobulle) je note : (j'ai changé les balises pour que le message passe : < devient /)

/a class="infobulle"/ces mots d'un texte/span/Affichage d'une info-bulle au passage de la souris//span///a/

et une fois basculé en mode Rédiger cela devient :

/a class="infobulle" href="http://draft.blogger.com/blogger.g?blogID=969591628656874849">ces mots d'un texteAffichage d'une info-bulle au passage de la souris//a/

Et l'infobulle est désactivée …........... !!

C'est quoi ce « href="http://draft.blogger.com/blogger.g?blogID=969591628656874849" qui s'intègre dans le code ?

J'ai mis le "style" dans un autre gadget.

Meiser a dit…

Bonjour.
Il vaut mieux utiliser un gadget HTML/JavaScript car, avec la nouvelle interface, Blogger ajoute des retours à la ligne dans le code.

Pour l'éviter on peut aussi, dans la colonne de droite, cliquer sur "Options", cocher la case devant "Utiliser la balise <br>" et enregistrer.


GAVOT SOLIDARITÉ a dit…

Bon, toujours le même problème alors maintenant, le code change quand je bascule HTML-Rédiger et ceci uniquement sur ce code infobulle. Donc pour moi deux solutions :
1.ne plus intervenir sur l'article une fois codé et publié
2.copier les codes à part et copier coller en cas de modifs ultérieures.

Le code "style" qui est dans un gadget indépendant doit il être mis tel quel ou doit-il être modifié ?

Meiser a dit…

Bonjour.
Aucun changement.


baladeur a dit…

Merci, je vais donc continuer comme cela et me mettre au HTML (apprendre, toujours apprendre !)

Centre Allonnes a dit…

bonjour, je viens de créer un blog chez blogger,dernière version. Je ne suis débutante, et je voudrais mettre une image sur un mot avec lien...
comment puis je procéder...
J'ai essayé de suivre les instructions mais je ne suis pas très douée
où faut il mettre ces codes, dans le commencement du texte dans message ou dans le modèle (personalisation htlm du modèle)
merci de m'éclairer étape par étape
merci beaucoup

Meiser a dit…

Bonjour.

Dans la version html du message, on doit trouver 3 choses :
- la balise <a avec le lien à atteindre
- la balise <img avec l'adresse de l'image qui remplace le mot
- la balise fermante </a>

Exemple :
<a href="http://test-ordre-chronologique.blogspot.be/" target="_blank">
<img src="http://1.bp.blogspot.com/-ReIe7WWKBuU/UQ9_bBKHiKI/AAAAAAAABjs/FvgdJF9KWAk/s200/fleche_h_b.PNG" />
</a>


Carmen Massini a dit…

Bonsoir,

Comment automatiser l'affichage des infobulles pour :
- les liens dans les articles?
- les liens des titres d'articles?
- les liens dans les pages?
- les liens des titres de pages?

Merci d'avance pour votre réponse.

Carmen

TANCREZ Philippe a dit…

Bonjour

Pourrai-je obtenir votre aide?
Je souhaite mettre une info bulle sur une phrase mais cette phrase à un lien vers un autre article et je dois dire que je n'y arrive pas. Un peu d'adie serait très sympa.
Cordialement
Charisma45

TANCREZ Philippe a dit…
Ce commentaire a été supprimé par l'auteur.
Meiser a dit…

Bonjour.

Il suffit d'ajouter
title="Affichage d'une info-bulle au passage de la souris"
juste après
<a (2° méthode ci-dessus).


Meiser a dit…

Avec la 1° méthode, il suffit d'ajouter
class="infobulle"
juste après
<a


Tancrez Philippe a dit…

Bonjour

Je souhaite mettre sur mon blog en info bulle des position gps. J' ai donc réussi à tatons à faire cela
http://www.charisma45.com/2015/08/essai-infobulle.html
en faisant comme ceci
http://www.cjoint.com/c/EKmrpTd8cpN
et cela fonctionne si l'on met un mot ou groupe de mot
mais cela ne fonctionne plus si l'on met ce mot dans un texte
http://www.charisma45.com/2015/11/essai-info-bulle-suite.html
j'ai fait comme ceci
http://www.cjoint.com/c/EKmrrTN3q2N

et de plus la fin du texte se retrouve à ligne.
J'ai compris pour changer les couleurs, la forme, il ne me manque plus que ce problème.

Si vous pouviez m'aider ce serait sympa car comme je ne suis pas très doué avec ce genre de langage.
Cordialement
Charisma45