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:

Afficher

Contenu d'exemple

Afficher

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" />

Afficher le code javascript

function show_hide(elem, id)
{
	if( document.getElementById(id).style.display == 'none' )
	{
		document.getElementById(id).style.display = 'block';
		elem.innerHTML = "Masquer";
	}
	else
	{
		document.getElementById(id).style.display = 'none';
		elem.innerHTML = "Afficher";
	}
}

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.

Code html:

<!-- css à ajouter en en-tête
Vous pouvez personnaliser votre bulle d'aide ici, en ajoutant une couleur de fond etc.
#tooltip {
   position:absolute;
   visibility:hidden;
} -->

<!-- code à insérer une seule fois dans la page -->
<div id="tooltip"></div>

<!-- element avec une bulle d'aide -->
<div onmouseover="tooltip.show(this)"
	onmouseout="tooltip.hide(this)"
	title="Hello you !">
	<p>Voici le contenu d'une div, avec un exemple de bulle d'aide.
	Passez votre souris au dessus.</p>
</div>

Afficher le code javascript

/**
 *
 * Can show a tooltip over an element
 * Content of tooltip is the title attribute value of the element
 * Tested with Firefox, IE6, IE5.5, IE7, Konqueror
 *
 * To use it :
 * 1.include this script on your page
 * 2.insert this element somewhere in your page
 *       <!-- <div id="tooltip"><\/div> -->
 * 3. style it in your CSS stylesheet (set color, background etc..). You must set
 *     this two style too :
 *     div#tooltip { position:absolute; visibility:hidden; ... }
 * 4.the end. test it ! :-)
 *
 * @version 1.1
 * @copyright 2004-2007 Laurent Jouanneau. 
 * @link http://ljouanneau.com/soft/javascript
 * @licence release under LGPL Licence
 */


// the tooltip object
var tooltip = {
    // setup properties of tooltip object
    id:"tooltip",
    offsetx : 10,
    offsety : 10,
    _x : 0,
    _y : 0,
    _tooltipElement:null,
    _saveonmouseover:null
}

/**
* Open ToolTip. The title attribute of the htmlelement is the text of the tooltip
* Call this method on the mouseover event on your htmlelement
* ex :  <!-- <div id="myHtmlElement" onmouseover="tooltip.show(this)"...><\/div> -->
*/
tooltip.show = function (htmlelement) {

    // we save text of title attribute to avoid the showing of tooltip generated by browser
    var text=htmlelement.getAttribute("title");
    htmlelement.setAttribute("title","");
    htmlelement.setAttribute("title_saved",text);

	if(document.getElementById){
        this._tooltipElement = document.getElementById(this.id);
	}else if ( document.all ) {
        this._tooltipElement = document.all[this.id].style;
	}

    this._saveonmouseover = document.onmousemove;
    document.onmousemove = this.mouseMove;

    this._tooltipElement.innerHTML = text;

    this.moveTo(this._x + this.offsetx , this._y + this.offsety);

    if(this._tooltipElement.style){
        this._tooltipElement.style.visibility ="visible";
    }else{
        this._tooltipElement.visibility = "visible";
    }
   return false;
}

/**
* hide tooltip
* call this method on the mouseout event of the html element
* ex : <!-- <div id="myHtmlElement" ... onmouseout="tooltip.hide(this)"><\/div> -->
*/
tooltip.hide = function (htmlelement) {
    htmlelement.setAttribute("title",htmlelement.getAttribute("title_saved"));
    htmlelement.removeAttribute("title_saved");

    if(this._tooltipElement.style){
        this._tooltipElement.style.visibility ="hidden";
    }else{
        this._tooltipElement.visibility = "hidden";
    }
    document.onmousemove=this._saveonmouseover;
}



// Moves the tooltip element
tooltip.mouseMove = function (e) {
   // we don't use "this" because this method is assign to an event of document
   // and so is dereferenced
    if(e == undefined)
        e = event;

    if( e.pageX != undefined){ // gecko, konqueror,
        tooltip._x = e.pageX;
        tooltip._y = e.pageY;
    }else if(event != undefined && event.x != undefined && event.clientX == undefined){ // ie4 ?
        tooltip._x = event.x;
        tooltip._y = event.y;
    }else if(e.clientX != undefined ){ // IE6,  IE7, IE5.5
        if(document.documentElement){
            tooltip._x = e.clientX + ( document.documentElement.scrollLeft || document.body.scrollLeft);
            tooltip._y = e.clientY + ( document.documentElement.scrollTop || document.body.scrollTop);
        }else{
            tooltip._x = e.clientX + document.body.scrollLeft;
            tooltip._y = e.clientY + document.body.scrollTop;
        }
    /*}else if(event != undefined && event.x != undefined){ // IE6,  IE7, IE5.5
        tooltip.x = event.x + ( document.documentElement.scrollLeft || document.body.scrollLeft);
        tooltip.y = event.y + ( document.documentElement.scrollTop || document.body.scrollTop);
    */
    }else{
        tooltip._x = 0;
        tooltip._y = 0;
    }
    tooltip.moveTo( tooltip._x +tooltip.offsetx , tooltip._y + tooltip.offsety);

}

// Move the tooltip element
tooltip.moveTo = function (xL,yL) {
    if(this._tooltipElement.style){
        this._tooltipElement.style.left = xL +"px";
        this._tooltipElement.style.top = yL +"px";
    }else{
        this._tooltipElement.left = xL;
        this._tooltipElement.top = yL;
    }
}