-
Infobulle [EklaBlog]
/!\ Le JavaScript doit être activé!Passes la souris sur ce texte ;)Du texte apparaît !
On peut même mettre des images ;)Pour ajouter cet effet dans vos articles ou vos modules, nous allons réutiliser un script d'EklaBlog. Rassurez-vous, nous n'allons pas toucher au JS
<a class="infobulle" onmouseover="Help.bubble(this)">ELEMENT VISIBLE</a><span class="help_content">CONTENU INVISIBLE</span>Remplacez "ELEMENT VISIBLE" par votre objet qui déclenchera l'infobulle. Dans mon exemple, c'est du texte, mais vous pourriez très bien le mettre sur une image :
Remplacez URL par le lien de votre image dans le code ci-dessous<a class="infobulle" onmouseover="Help.bubble(this)"><img src="URL"/></a><span class="help_content">CONTENU INVISIBLE</span>A la place de "CONTENU INVISIBLE", mettez le texte et/ou les images qui apparaitrons.
/!\ Vous ne pouvez pas insérer de lien de l'infobulle avec ce code. Si vous souhaiter pouvoir cliquer dans l'infobulle, je vous renvoie à l'article suivant :
=> http://fanstasy-graph.eklablog.net/infobulle-amelioree-a108139450Vous pouvez également personnaliser cet affichage grâce au CSS
On appelle l'infobulle avec un lien. Si vous ne voulez pas que le texte ait la même apparence que les liens de votre blog, vous pouvez créer une nouvelle classe.
a.infobulle {propriété: valeur;}Ensuite, pour modifier l'apparence générale, il faut utiliser le sélecteur #help_bubble, par défaut sur Ekla (je vous donne le code par défaut)
#help_bubble {
propriété : valeur; /*personnalisez*/
}Remarque : ce sélecteur concerne également les infobulles qui apparaissent en survolant les derniers visiteurs.
-
Commentaires
ah daccord xD merci en fait comme j'ai regarder très vite le tutoriel je n'avais pas remarquer xDD //SBAFF// merci du tuyau :3 au fait j'ai remarquer que l'astuce du menu coulissantr avait été bloquée, c'est definitif, ou provisoire?
*s'incruste* définitif??Pourquoi?=(
sinon...j'ai compris la moitiée*sort* enfin je vais tester x)
C'est pas encore trop compliqué ça ;)
Sinon pour le menu, j'avais trouvé un code pour les forum qui donnait un menu coulissant et je l'ai adapté sur Ekla. Sauf que la créatrice considérait que c'était du plagiat et m'a donc demander d'enlever l'article --'
@ Chupsii : Il faut que tu envoies un mail a Eklablog en disant que tu voudrais activer le Javascript sur tout tes blogs puis logiquement, Stéphanie va te renvoyer un mail en disant que c'est activer. Si tu ne sais pas si il est activé, et bien tu peux tester le tuto de Nagalia (de l'article) et si ça marche c'est que c'est activé, et si ça marche pas c'est que soit c'est pas activé soit tu t'es trompée quelque part :)
Ahhhhh merci ! (L) Il y a un certain temps, j'avais essayé de faire l'infobulle, mais ça déconnais u_u' Merci encore ô/
Toujours de super créations Nagalia. Bravo.
D'après ce que j'en sais, on ne peut pas agir directement sur l'infobulle "standard" pour la personnaliser. Il faut passer par la création d'un sélecteur que l'on affiche au survol par la souris. Le problème que je n'ai pas encore résolu est que je arrive pas à avoir le focus sur ce sélecteur et par conséquent, pas moyen d'y mettre un lien.
Mais je ne désespère pas.
Oui j'ai bien trouvé mettre une image c'est <img scr="Url De L'image"/> mais mettre là dans le fond ?!!
Merci et navré pour le dérengement !!!!!
@Univers: La couleur du texte ou du fond?
@Shimyjadina: Quad tu édite un article, il faut cliquer sur la petite icone "HTML"
Celui là dans le html d'un article pour faire apparaitre l'infobulle
<a class="infobulle" onmouseover="Help.bubble(this)">TEXTE VISIBLE</a><span class="help_content">TEXTE INVISIBLE</span>
Et l'autre dans le css pour personnaliser l'infobulle
Bonsoir j'ai une petite question est-ce que l'on peut mettre l'infobulle sur une image avec un code pour le html ? Je sais que ma question est un peu bête. Merci d'avance pour la réponse. Bonne soirée
Si tu veux mettre l'infobulle sur une image, il faut remplacer (dans le html) le texte visible par une image:
<a class="infobulle" onmouseover="Help.bubble(this)"><img src="URL IMAGE"/></a><span class="help_content">TEXTE INVISIBLE</span>
34Atsumi Kusumi
Mardi 15 Mai 2012 à 10:11
Merciii
Mais pour activer le javascript il faut envoyé un message a stephanie ??
*La-fille-qui-ne-ses-rien-a-rien*
Nagalia,
j'ai fait un tuto javascript qui permet le clic dans une infobulle (enfin un truc du genre^^)
c'est ici: http://le-blog-facile.ek.la/des-tooltips-differents-p372367
On peut aussi mettre directement le message dans la fonction Help.bubble comme ceci:
<a onmouseover="Help.bubble(this,'<strong>Salut</strong> c\'est moi<br/><img src=\'http://papasti.eklablog.fr/images/menubar/icon_account.png\'></img>');">C'est moi</a>
Et en plus simple avec juste un texte:
<a onmouseover="Help.bubble(this,'Message ici');">C'est moi</a>
37Shuchu
Vendredi 15 Juin 2012 à 12:16
Merci beaucoup Nagalia, je le cherchais depuis le début de l'année et je viens d'avoir la précieuse idée de venir chercher sur ton blog 8D
question : on fait comment pour qu'une infobulle apparaisse au survol de l'image/avatar de quelq'un (comme toi sur l'image/avatar de celui qui écrit (tu me suit ?))
Je m'apelle pas Nagalia ;
Mais dans le Texte Visible mets :
<img src="URL de ton Image " alt="" />
C'est tout et ne touche pas aucune chose d'autre :) !!
Enfete Âñàs Üñîvérs Eta pas tout compris: par exembre que je survole ta photo de profil ya pas le moche truc jaune qu'on a quand on commence un blog , la c'est une petite bulle bleu arrodit avec écrit profil de..... Et moi je veut faire sa (c'est bon t'arrive a me suivre ??
46NovaliaMercredi 24 Octobre 2012 à 11:40
<a class="infobulle" onmouseover="Help.bubble(this)">TEXTE VISIBLE</a><span class="help_content">TEXTE INVISIBLE</span>
TEXTE VISIBLE: Par exemple tu mes +D'info
Et TEXTE INVISIBLE: Tu mets ce qui s'afficherait !!
MERCI AUSSI POUR CE CODE! JY AI RAJOUTé dans code css le border radius !!!
merci pour tout ce ke tu partages !!!
Salut j'aurais voulu savoir comment faire une info-bulle sur le menu du header. Je cherche partout mais je n'arrive pas à trouver. Je ne sais même pas si c'est possible. Merci d'avance
Bonjour, j'ai installé un mauvais code sur mon blog hiver et je ne le vois plus, j'ai à la place une grosse
page publicitaire qui s'ouvre, aurais-tu une solution pour faire disparaître cette page publicitaire s.t.p. ?
On voit mon blog quelques secondes, il est bleu pâle, ensuite la page publicitaire apparaît.
C'était un code pour faire tomber la neige que la personne devrait enlever de son blog pour nous aider soi-diant.
En attendant, je me sers d'un autre blog.
Une amie qui s'y connaît a bien essayé de m'aider, mais c'est compliqué.
Amitié et bonne poursuite sur ce blog bien instructif.
Tu pourras voir l'adresse de mon blog sur mon profil, il m'est difficile de la prendre et de la mettre ici.
Merci à l'avance, si tu peux m'aider.
Allison
@ Allison : Ton blog a l'air de fonctionner ;) Tout est résolu ?
@ Shikamari : Je ne comprend pas très bien ce que tu veux dire par "infobulle dans le menu du header". Faire apparaitre une infobulle sur les liens ?
Si c'est le cas, je crains que ça ne soit pas possible. Il faudrait que tu crées un autre menu, et que tu le place ensuite dans le header.=> http://fanstasy-graph.eklablog.net/contenu-hors-des-articles-a30141132
"/!\ Pas de liens. Un bug que je n'arrive pas a résoudre fait qu'on ne peut pas passer la souris dans l'infobulle --' Si quelqu'un a une solution, je suis preneuse (surtout que ça marche partout SAUF sur ekla --'') "
Pour ton probleme tu dois aller configuration generale /avance/ et cocher la case/ ○ Afficher la description de l'image lors du survol de la souris
Voila j'espere que je t'ai aidee ^^
Hm, à moins que je n'ai pas bien suivit la manip' , cette option permet seulement d'afficher le titre des image avec le même effet que les autres infobulles du blog. Il reste impossible de passer la souris dedans ^^'
Il suffit de mettre une image à la place de "TEXTE VISIBLE"
<a class="infobulle" onmouseover="Help.bubble(this)"><img src="IMAGE"/></a><span class="help_content">TEXTE INVISIBLE</span>
Le problème des liens est enfin résolu.
Voici l'article explicatif pour ceux qui en aurait besoin :
=> http://fanstasy-graph.eklablog.net/infobulle-amelioree-a108139450
Il y a une autre façon de faire des infobulles pour y mettre des liens ;)
=> http://fanstasy-graph.eklablog.net/infobulle-amelioree-a108139450
Non je parles du contenu visible. J'ai essayé de mettre une infobulle dans un lien mais il n’apparaissait pas au survol.
Le lien est représenté par la balise <a>
Normalement, on l'écrit simplement comme ça :
<a href="URL"> MON LIEN </a>
Il faut rajouter l'url de ton lien dans le code de l'infobulle avec l'attribut href
<a href="URL" class="infobulle" onmouseover="Help.bubble(this)"> MON LIEN </a><span class="help_content">CONTENU INVISIBLE</span>
Bonjour, je souhaiterais savoir qu'ai-ce qu'on ajoute a la place de valeur dans le code suivant ?
#help_bubble {
propriété : valeur; /*personnalisez*/
}
Bonjour.
Il faut le mettre dans la partie CSS, ou HTLM ? Si HTLM je ne vois pas le petit bouton HTLM.75pol2095Jeudi 26 Novembre 2015 à 14:26
Suivre le flux RSS des commentaires
Ajouter un commentaire
-
Graphisme
Codage
Communauté
Libre Service
Aide
-
Créer mon blog 
qu'est ce que c'est qu'une infobulle s'il te plait? tu as une photo ou une capture d'ecranN? merci d'avance