Va et viens entre deux boutons.
Posté : 29 mai 2013, 09:18
Bonjour,
J'ai un bouton type Arrêt d'Urgence, donc deux états. Et un autre bouton qui me sert à relâcher cet AU (j'ai mis deux boutons pour plus de sécurité).
J'ai deux images pour mon AU est une pour le bouton qui sert à le relâcher, et j'aimerais que quand je clic sur mon AU, celui-ci change d'état, que si je re-clic dessus il ne se passe rien, et que quand je clic sur relâche AU, mon AU revienne dans son état de départ.
Pour l'instant j'ai mes deux état mais ils sont relier à la BDD, donc il faut rafraichir pour voir le changement.
Voici mon code.
Merci pour la lecture.
J'ai un bouton type Arrêt d'Urgence, donc deux états. Et un autre bouton qui me sert à relâcher cet AU (j'ai mis deux boutons pour plus de sécurité).
J'ai deux images pour mon AU est une pour le bouton qui sert à le relâcher, et j'aimerais que quand je clic sur mon AU, celui-ci change d'état, que si je re-clic dessus il ne se passe rien, et que quand je clic sur relâche AU, mon AU revienne dans son état de départ.
Pour l'instant j'ai mes deux état mais ils sont relier à la BDD, donc il faut rafraichir pour voir le changement.
Voici mon code.
$(document).ready(function () {
// ici on creer une fonction on lui passe un paramettre un id et un statut
function sendPhp(mot,valeur){
$.ajax({
type: "POST",//je dis a ajax d'envoiyer les donnees en post
data: {mot : mot,valeur : valeur}, //ici j'envoi les variable statut et id a fichier.php
url: "Commande1.php",//le fichier php
success:function(data){
//ici tu peux ajouter une image ou text pour dire que cela c'est bien passe
}
});
}
function swtichImg(images){
var src=images.attr('src');//on récupéré la valeur src de l'image actuelle
if(src=='DP2.png'){//si le src vos plus.png alors on initialise la variable img a moin.png
var img='DP1.png';
sendPhp('5','10');
}
else{//sinon elle vos plus.png
var img='DP2.png';
sendPhp('5','01');
}
images.attr("src", img);//on modifie le src par la nouvelle valeur
}
$(".AU").mousedown(function(){
sendPhp('2','00');
});
$(".gaucheTete").mouseup(function(){
sendPhp('3','00');
}).mousedown(function(){
sendPhp('3','10');
}).mousemove(function(){
sendPhp('3','00');
});
$(".droiteTete").mouseup(function(){
sendPhp('3','00');
}).mousedown(function(){
sendPhp('3','01');
}).mousemove(function(){
sendPhp('3','00');
});
$(".DCY").mouseup(function(){
sendPhp('4','00');
}).mousedown(function(){
sendPhp('4','10');
}).mousemove(function(){
sendPhp('4','00');
});
$(".plusoumoins").mouseup(function(){
swtichImg($(this));//on appelle la fonction et on lui donne en paramètre l'objet
});
$(".AUrelache").mouseup(function(){
sendPhp('2','11');
});
function char($text)
{
$text = htmlentities($text, ENT_NOQUOTES, "UTF-8");
$text = htmlspecialchars_decode($text);
return $text;
}
});
</script>
</head>
<?
//$src = '+';
//$classe = 'plus';
?>
<body>
<?
mysql_connect("localhost","user","");
mysql_select_db("test");
$sql = 'SELECT Valeurs FROM mots WHERE ID = 5';
$mot5 = mysql_query($sql);
$row5 = mysql_fetch_row($mot5);
$sql = 'SELECT Valeurs FROM mots WHERE ID = 2';
$mot2 = mysql_query($sql);
$row2 = mysql_fetch_row($mot2);
mysql_close();
?>
<!--
ici je mets une image je mets une class car plus facile pour ecouter les evenements si il en a plusieurs
et je mets un id qui n'ai pas top car un id ne peu pas commence par un numerique puis ne peu pas etre un doublons mais bon ici je c'est sur element jouer
-->
<table>
<tr>
<td>
<div style="width:1100px; height:720px;"> <!-- test -->
<!-- Affichage des images -->
<?
if($row2['0'] == 11){
echo '<img src="AU.png" id="1" class="AU" style="float:left; margin:0;"/>';
}else{
echo '<img src="AU1.png" id="1" class="AU" style="float:left; margin:0;"/>';
}
?>
<img src="PoussoireV.png" id="1" class="DCY" style="float:left; margin:0;"/>
<img src="G.png" id="1" class="gaucheTete" style="float:left; margin:0;"/>
<img src="D.png" id="1" class="droiteTete" style="float:left; margin:0;"/>
<?
if($row5['0'] == 10){
echo '<img src="DP1.png" id="1" class="plusoumoins" style="float:left; margin:0;"/>';
}else{
echo '<img src="DP2.png" id="1" class="plusoumoins" style="float:left; margin:0;"/>';
}
?>
<img src="Logo.png" id="1" class="" style="float:left; margin:0;"/>
<img src="PoussoireV2.png" id="1" class="DCY" style="float:left; margin:0;"/>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br />
<img src="AUrelache.jpg" id="1" class="AUrelache" align="center"/>Relacher l'arrêt d'urgence
</div>
</td>
Merci pour la lecture.
