Javascript

Montrer / Cacher

Ce premier code très simple permet de cacher et d'afficher un élément ou même un bloc html, cela permet de ne pas trop encombrer la page ou bien de laisser le droit à l'utilisateur d'afficher la suite ou non(spoiler). L'action se déclenche à l'aide d'un clique sur une balise button dans cet exemple, il est bien évidemment possible d'utiliser n'importe quel autre évènement avec n'importe quel élément html (div, input, checkbox etc.). Cet action ne prend qu'une fonction vous pourrez alors facilement l'adapter à vos besoins.

Exemple:


Code html:

<button onclick="show_hide(this, 'exemple_hs1');">Afficher</button>
<p id="exemple_hs1" style="display:none">Contenu d'exemple</p><br/>

<button onclick="show_hide(this, 'exemple_hs2');">Afficher</button>
<img id="exemple_hs2" style="display:none" src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="XHTML" height="31" width="88" />

Tooltip / Bulle d'aide

Ce code permet d'afficher rapidement une bulle d'aide au dessus d'un élément Html en suivant les mouvements de la souris. La bulle d'aide ne permet d'afficher que du texte, les possibilités sont donc limitées mais son utilisation est simple. Pour cela il suffit d'ajouter l'attribut 'title' à la balise avec le texte désiré, et d'ajouter les deux évènements 'onmouseover' et onmouseout' (cf. code html).

Je ne suis pas l'auteur de ce code javascript, je l'ai découvert sur ce site ljouanneau.com.

Exemple:

Voici le contenu d'une div, avec un exemple de bulle d'aide. Passez votre souris au dessus.

Code html: