<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>knob</title>
<style>
#cmt {
left: 20px;
top: 60px;
position: absolute;
width:120px;
}
#lef {
left: 7px;
top:50px;
width:20px;
}
#med {
left: 53px;
top:25px;
width:50px;
}
#rig {
left: 130px;
top:50px;
width:20px;
}
.lab {
background-color: grey;
border-color: black;
border-radius: 15px;
color:white;
font-family:verdana;
position: absolute;
text-align: center;
box-shadow: 4px 4px 2px #373737;
}
</style>
</head>
<body onload="rot2php(event)">
<img id="cmt" src="http://sin.nexgate.ch/knb2/knb.jpg" onclick="rot2php(event)">
<span class="lab" id="med">Auto</span>
<span class="lab" id="lef">0</span>
<span class="lab" id="rig">1</span>
<script>
var pos=0;
function rot2php(event) {
var x = event.clientX;
var but=document.getElementById("cmt").style;
if(x<80 && pos>0) {
but.WebkitTransform += "rotate(-45deg)";
pos--;
}
else
if(x>80 && pos<2) {
but.WebkitTransform += "rotate(45deg)";
pos++;
}
window.location.href="./knb.php?mod=" + pos;
}
</script>
</body>
</html>
Lecture du code à suivre
vendredi 17 juillet 2015
Commutateur 3 positions
Cette page http://sin.nexgate.ch/knb2/knb.html illustre le résultat du code qui suit. La position du commutateur - 0, 1 ou 2 - est enregistrée ici http://sin.nexgate.ch/knb2/knb.txt. Le script php invoqué et réalisant l'enregistrement est similaire à celui du billet Un potentiomètre sur une page web.
Inscription à :
Publier les commentaires (Atom)
Aucun commentaire:
Enregistrer un commentaire