Interrupteur

Un petit truc dont j’avais besoin en javascript aujourd’hui était très instructif. J’ai appris à me servir des variables en javascript et à manipuler et modifier le beau et grand DOM.

Je devais (tout simplement) remplacer une image quand on clique dessus par un clic, puis reremplacer l’image après… Heureusement qu’un certain Shinrei n’était pas loin.

Je suis donc passé par plusieurs formes, dont une qui remplaçait le src de l’image, et une qui utilisait des variables. Mais finalement je suis resté sur cette forme, qui est à la fois très simple et très facilement modifiable en s’aidant du CSS.

Pour cela il nous faut un peu de JavaScript :

<script type="text/javascript">
function interrupteur() {
    if (document.getElementById("on"))
        document.getElementById("on").id = "off";
    else
        document.getElementById("off").id = "on";
}
</script>

En français ça donnerait : « Si on a un élément du document dont l’id est on, alors changer son id à off, ou bien alors changer son id à on. »

On peut ainsi appliquer tout ceci en donnant l’id="off" (ou "on") ainsi qu’un moyen d’actionner la fonction sur n’importe quelle balise :

<body id="off" onclick="interrupteur()">

Mais on oublie pas le zeste de css qui va définir les différents aspects selon qu’il soit allumé ou eteint, selon son id :

#off { background: black url(off.gif) no-repeat center; }
#on { background: white url(on.gif) no-repeat center; }

Et voilà.

Sunfox

Interrupteur

Sunny Ripert