<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>button</title>
</head>
<body onload="togphp()">
<img id="btn" width="80">
<script>
document.getElementById("btn").addEventListener("click", togphp);
function togphp() {
var imgon="http://sin.nexgate.ch/bt2/btnon.jpg";
var imgoff="http://sin.nexgate.ch/bt2/btnoff.jpg";
var img=document.getElementById("btn");
if(img.src==imgoff) {
img.src=imgon;
window.location.href="./bt.php?st=1";
}
else {
img.src=imgoff;
window.location.href="./bt.php?st=0";
}
}
</script>
</body>
</html>
Lecture du code HTML
Il n'y a qu'un seul élément visible sur la page, déclaré par la balise<img> en ligne 8. Son attribut src définissant l'URL de l'image sera affecté plus bas par le code Javascript. C'est lui qui la déterminera selon les clics de souris sur ordinateur ou les touches sur smartphone. Son autre attribut width="80" détermine la largeur de l'image. Sa hauteur non définie est laissée au choix du navigateur qui gardera alors ses proportions intactes.L'attribut onload de l'élément <body> en ligne 7, lance la fonction tophp() quand le chargement de la page est terminé. Cette fonction Javascript est décrite ensuite. Elle détermine l'attribut src, URL de l'image à associer à l'élément <img>.
Lecture du code Javascript
Donné aux lignes 9 à 24, il change l'image de l'interrupteur à chaque clic et lance l'enregistrement de son état en invoquant le script bt.php.
La ligne 10 s'exécute au chargement de la page, elle associe l'image identifiée "btn" à la fonction nommée togphp() et détaillée quelques lignes en-dessous. Celle-ci sera appelée à l'instant du clic (click).
La ligne 11 est la déclaration de la fonction togphp(). Cette fonction s'exécutera lorsqu'elle sera invoquée. Deux variables imgon et imgoff y sont d'abord déclarées et affectées en lignes 12 et 13. Il s'agit des URL correspondant aux deux images, une pour chaque état de l'interrupteur : btnon.jpg et btnoff.jpg. La troisième variable img représente l'élément <img> identifié par son attribut id="btn". Ceci simplifie les scripts qui suivent.
Et on termine par l'alternative if else. Sa condition en ligne 15 compare la valeur de img.src - URL de l'image cliquée - à l'URL correspondant à l'état off. Si il y a égalité, ==, alors on change l'image avec l'URL imgon : ligne 16. On appelle en ligne 17 ensuite le script bt.php en lui transmettant à la suite de son URL le paramètre st affecté de 1 qui est bien l'état de l'interrupteur suivant le clic. Ce script se charge d'enregistrer le 1 sur le serveur distant comme indiqué auparavant.
Ce qui suit le else en ligne 19 est alors facile à interpréter.
Et on termine par l'alternative if else. Sa condition en ligne 15 compare la valeur de img.src - URL de l'image cliquée - à l'URL correspondant à l'état off. Si il y a égalité, ==, alors on change l'image avec l'URL imgon : ligne 16. On appelle en ligne 17 ensuite le script bt.php en lui transmettant à la suite de son URL le paramètre st affecté de 1 qui est bien l'état de l'interrupteur suivant le clic. Ce script se charge d'enregistrer le 1 sur le serveur distant comme indiqué auparavant.
Ce qui suit le else en ligne 19 est alors facile à interpréter.
Aucun commentaire:
Enregistrer un commentaire