Infobulle [EklaBlog]

25.12.2011

/!\ 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-a108139450

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