Projet | ​​​​​Mini projet - Web |  CSS & JS - Interrupteur ON/OFF

Nous construisons une page web. Elle représente un interrupteur exposé ci-contre. 
Il s'agit de deux images enregistrées dans un seul fichier. Seule une image sera dessinée selon l'état de l'interrupteur à afficher.

Nous souhaitons animer l'image dès qu'on la clique. Cette page pourra constituer une commande à distance via le web.
​
Sa composition nécessite l'usage de script css pour son style et de javascript pour sa réactivité.

1. A l'aide d'un éditeur (ex: paint ou irfanview) séparer les 2 images et les enregistrer dans un répertoire sous un des formats jpg ou png de préférence.

Nous intégrons une des images dans une page html. Voir le site w3Schools.com si nécessaire.

1. Construire la page web avec l'image puis l'enregistrer dans le même répertoire.
2. Ajuster les dimensions de l'image.
3. Afficher la page web dans le navigateur.

L'objectif est d'ajouter un script  à notre page web afin de changer l'image quand elle sera cliquée.

1. Lire ce blog puis l'intégrer dans la page web comme indiqué.
2. Y écrire les deux URLs des fichiers-images et ajouter la propriété à l'élément html <img> : id="btn"
3. Afficher la page web dans le navigateur et s'assurer que l'image change à chaque clic.

• xmlhttp.open("GET","http://sin.nexgate.ch/site/switch.php?st=1",true); envoie 1 à la page.
• xmlhttp.open("GET","http://sin.nexgate.ch/site/switch.php?st=0",true); envoie 0 à la page.

1. Compléter le code Javascript avec les instructions afin d'enregistrer l'état de l'interrupteur.
2. Ajouter la déclaration var xmlhttp=new XMLHttpRequest(); après la balise <script> et l'instruction xmlhttp.send(); en bonne place dans le script. Cette dernière exécutera la requête vers la page web switch.php
3.  S'assurer que l'enregistrement a bien eu lieu en consultant la page-texte. Penser à rafraichir la page.

• Reprendre l'activité en choisissant un autre interrupteur issu d'une recherche d'images sur le web. Une recherche avec l'item on off donne des résultats utiles.