Projet | ​​​​​​Mini projet - Web |  CSS & JS - Commutateur 3 positions

Contexte

Nous construisons une page web. Elle représente un commutateur exposé ci-contre. Nous orientons l'image selon 3 directions, au clic de la souris afin d'obtenir 3 consignes. 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é.

CSS - Positionnement des éléments de la page web

L'objectif est de placer les éléments sur la page web à l'aide des propriétés css. On pourra se prompter avec le site w3Schools.com.

  1. Lire ce blog et copier le script proposé dans un fichier html.
  2. Vérifier son rendu dans le navigateur.
  3. Placer l'image du commutateur et le label 0 selon le rendu ci-contre à l'aide des propriétés : left, top et position.
  4. Ajouter les 2 autres labels.
  5. Styliser les labels avec les propriétés : border-radius, border-color, text-align, box-shadow

JS - Ajustement du comportement du commutateur

Nous améliorons le code javascript afin que le commutateur s'oriente vers les labels. Nous souhaitons également que le commutateur tourne vers la gauche au clic sur sa partie gauche.
  1. Modifier les lignes 23 et 27 afin d'orienter le commutateur convenablement.
  2. Relever la valeur de la variable x s'affichant sous le commutateur afin qu'il tourne de façon satisfaisante selon le clic et adapter le script en conséquence.

JS - Enregistrement de la position du commutateur

Finalement on envoie la position du commutateur à ​cette page-texte qui enregistre : 0, 1 ou 2. Pour cela nous ajoutons les 3 instructions présentées ci-dessous, successivement et en bonne place entre les balises <script> et </script>. elles envoient 0, 1 ou 2 à la page-texte
  • var url="http://sin.nexgate.ch/site/switch.php?st="+pos;
  • xmlhttp.open("GET",url,true);
  • xmlhttp.send();
  1. Compléter le code Javascript afin d'enregistrer l'état du commutateur lorsque sa rotation est effectuée.
  2. Ajouter la déclaration var xmlhttp=new XMLHttpRequest(); après la balise <script>
  3. S'assurer que l'enregistrement a bien eu lieu en consultant la page-texte. Penser à rafraichir la page.

Autre commutateur

  • Reprendre l'activité en choisissant un autre commutateur issu d'une recherche d'images sur le web. Une recherche avec l'item knob donne des résultats intéressant.

Commutateur 3 positions

Commutateur