Sunfox

Le journal de Sunny Ripert


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&nbsp: « 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à.

Articles probablement reliés

Commenter


Vous pouvez avoir une jolie icône vous aussi en créant un gravatar.

Vous pouvez y saupoudrer de l'HTML5 avec les balises et suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>.


:D Sunny Ripert

est un développeur web vivant à Paris.

CV, me contacter


Textes et contenus sous licence Creative Commons.
Site crée par mes soins et propulsé par WordPress.