[RESOLU] Va et viens entre deux boutons.

par **Lyssorus** » 29 mai 2013, 14:24

Bah écoute tout semble fonctionner là

Et grâce à toi c'est plus propre :p

Avec ça :

$(".AUrelache").mouseup(function(){
switchImg($(".AU"),'3');//on appelle la fonction et on lui donne en paramètre l'objet
});

Si je ne me trompe pas ^^' lors du clic up sur le bouton de classe AUrelache, on va dans la fonction switchImg avec les paramètre du bouton de classe AU. Non ?

Le mieux c'est que je remette tout ça sur le net et je te montre en fonctionnement héhé.

En tout cas là ça fonctionne comme je voulais.

Le hasard ou notre toute puissance ?

Je préfère penser à la deuxième option

On est trop fort !! (Surtout moi XD)

par **ghost5922** » 29 mai 2013, 14:05

ok si j'ai bien compris tu veux que lorsque tu clique sur AU on affiche image 2.jpg mais lorsque tu clique sur AUR l'image de AU devienne 1.jpg

si oui il a une erreur

$(".AUrelache").mouseup(function(){
switchImg($("#AU"),'3');//on appelle la fonction et on lui donne en paramètre l'objet
});

essaie plutôt avec l'id car on efface la class plutot

par **Lyssorus** » 29 mai 2013, 13:55

Alors le AU il à deux images, relâché et enfoncé.

Le bouton pour relâcher l'AU il n'à qu'un seul état (qu'une seul image).

Comme l'AU est la sécurité primordial d'un système comme celui ci, il ne faut pas que je plante dessus. On l'appuie souvent avec précipitation, c'est pour ça que je ne veux pas qu'avec un double clics malencontreux on puisse réengager le système.

Je ne sais pas si c'est encore bien clair ce que je dis lol ^^'.

Je test ce que tu m'as donné de nouveau

par **ghost5922** » 29 mai 2013, 12:14

Re,

voila j'ai juste virer tous les switch image un seul suffi on lui passe un type en plus et voila apres je suis loin de maitriser javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Ici on appelle jquery depuis google -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<title>Page de test</title>
<script type="text/javascript">

$(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 switchImg(images,type){
	  
	  var src=images.attr('src');//on récupéré la valeur src de l'image actuelle
	  if(type==1){
		  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');                    
		  }
	  }
	  if(type==2){
		  if(src=='AU.png'){//si le src vos plus.png alors on initialise la variable img a moin.png
			  var img='AU1.png';
			  sendPhp('2','00');
		  }
	  }
	  if(type==3){
		  if(src=='AU1.png'){//si le src vos plus.png alors on initialise la variable img a moin.png
			  var img='AU.png';
			  sendPhp('2','11');
		  }
	  }
	  images.attr("src", img);//on modifie le src par la nouvelle valeur
  } 
   
                        
  $(".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(){
 	 switchImg($(this),'1');//on appelle la fonction et on lui donne en paramètre l'objet
  });
  
  $(".AU").mousedown(function(){
 	 switchImg($(this),'2');                        
  });
  
  $(".AUrelache").mouseup(function(){
 	 switchImg($(".AU"),'3');//on appelle la fonction et on lui donne en paramètre l'objet
  });
  
  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="AU" class="AU" style="float:left; margin:0;"/>';
                }else{
                        echo '<img src="AU1.png" id="AU" 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>
    <td>
    
      <!-- Affichage de la camera -->
          <SCRIPT LANGUAGE="JavaScript">
          // Set the BaseURL to the URL of your camera
          var BaseURL = "http://192.168.1.48/";
          // DisplayWidth & DisplayHeight specifies the displayed width & height of the image.
          // You may change these numbers, the effect will be a stretched or a shrunk image
          var DisplayWidth = "500";
          var DisplayHeight = "900";
          // This is the path to the image generating file inside the camera itself
          var File = "axis-cgi/mjpg/video.cgi?resolution=1920x1080";
          // No changes required below this point
          var output = "";
          if ((navigator.appName == "Microsoft Internet Explorer" ) &&
             (navigator.platform != "MacPPC" ) && (navigator.platform != "Mac68k" ))
          {
            // If Internet Explorer under Windows then use ActiveX
            output  = '<OBJECT ID="Player" width='
            output += DisplayWidth;
            output += ' height=';
            output += DisplayHeight;
            output += ' CLASSID="CLSID:DE625294-70E6-45ED-B895-CFFA13AEB044" ';
            output += 'CODEBASE="';
            output += BaseURL;
            output += 'activex/AMC.cab#version=3,20,18,0">';
            output += '<PARAM NAME="MediaURL" VALUE="';
            output += BaseURL;
            output += File + '">';
            output += '<param name="MediaType" value="mjpeg-unicast">';
            output += '<param name="ShowStatusBar" value="1">';
            output += '<param name="ShowToolbar" value="1">';
            output += '<param name="AutoStart" value="1">';
            output += '<param name="StretchToFit" value="1">';
            output += '<BR><B>Axis Media Control</B><BR>';
            output += 'The AXIS Media Control, which enables you ';
            output += 'to view live image streams in Microsoft Internet';
            output += ' Explorer, could not be registered on your computer.';
            output += '<BR></OBJECT>';
          } 
                  else {
            // If not IE for Windows use the browser itself to display
            theDate = new Date();
            output  = '<IMG SRC="';
            output += BaseURL;
            output += File;
            output += '&dummy=' + theDate.getTime().toString(10);
            output += '" HEIGHT="';
            output += DisplayHeight;
            output += '" WIDTH="';
            output += DisplayWidth;
            output += '" ALT="Camera Image">';
          }
          document.write(output);
          document.Player.ToolbarConfiguration = "play,+snapshot,+fullscreen"
          // document.Player.UIMode = "MDConfig";
          // document.Player.MotionConfigURL = "/axis-cgi/operator/param.cgi?ImageSource=0"
          // document.Player.MotionDataURL = "/axis-cgi/motion/motiondata.cgi";
      </SCRIPT>
    </td>
  </tr>
  <tr>
    <td>
          <?php /*?><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><?php */?>
      <?php /*?><img src="AUrelache.jpg" id="1" class="AUrelache" align="center"/> Relacher l'arrêt d'urgence<?php */?>
    </td>
    <td>
    
    </td>
  </tr>
</table>

<?php /*?><img src="3.png" id="2" class="gauche"/>
<img src="4.png" id="2" class="droite"/>
<?php */?>
</body>
</html>

pour mais l'AU ne se relâche pas quand on clic sur AUrelache l'image dois changer ?

par **Lyssorus** » 29 mai 2013, 11:57

Yabon ça fonctionne !!!

En fait j'ai fait une bidouille :/donc si tu pouvais me dire ce que tu en pense niveau propreté ^^', mais donc c'est pas pressé vu que ça fonctionne.

Voilà le code :

[javascript]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>
<title>Page de test</title>
<script type="text/javascript">

$(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 switchImg(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
}

function switchAU(images){
var src=images.attr('src');//on récupéré la valeur src de l'image actuelle
if(src=='AU.png'){//si le src vos plus.png alors on initialise la variable img a moin.png
var img='AU1.png';
sendPhp('2','00');
}

images.attr("src", img);//on modifie le src par la nouvelle valeur
}

function switchAUr(images){
var src=images.attr('src');//on récupéré la valeur src de l'image actuelle
if(src=='AU1.png'){//si le src vos plus.png alors on initialise la variable img a moin.png
var img='AU.png';
sendPhp('2','11');
}
images.attr("src", img);//on modifie le src par la nouvelle valeur
}

$(".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(){
switchImg($(this));//on appelle la fonction et on lui donne en paramètre l'objet
});

$(".AU").mousedown(function(){
switchAU($(this));
});

$(".AUrelache").mouseup(function(){
switchAUr($(".AU"));//on appelle la fonction et on lui donne en paramètre l'objet
});

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();
?>


<table>
<tr>
<td>
<div style="width:1100px; height:720px;"> 


<?
if($row2['0'] == 11){
echo '<img src="AU.png" id="AU" class="AU" style="float:left; margin:0;"/>';
}else{
echo '<img src="AU1.png" id="AU" 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>
<td>


<SCRIPT LANGUAGE="JavaScript">
// Set the BaseURL to the URL of your camera
var BaseURL = "http://192.168.1.48/";
// DisplayWidth & DisplayHeight specifies the displayed width & height of the image.
// You may change these numbers, the effect will be a stretched or a shrunk image
var DisplayWidth = "500";
var DisplayHeight = "900";
// This is the path to the image generating file inside the camera itself
var File = "axis-cgi/mjpg/video.cgi?resolution=1920x1080";
// No changes required below this point
var output = "";
if ((navigator.appName == "Microsoft Internet Explorer" ) &&
(navigator.platform != "MacPPC" ) && (navigator.platform != "Mac68k" ))
{
// If Internet Explorer under Windows then use ActiveX
output = '<OBJECT ID="Player" width='
output += DisplayWidth;
output += ' height=';
output += DisplayHeight;
output += ' CLASSID="CLSID:DE625294-70E6-45ED-B895-CFFA13AEB044" ';
output += 'CODEBASE="';
output += BaseURL;
output += 'activex/AMC.cab#version=3,20,18,0">';
output += '<PARAM NAME="MediaURL" VALUE="';
output += BaseURL;
output += File + '">';
output += '<param name="MediaType" value="mjpeg-unicast">';
output += '<param name="ShowStatusBar" value="1">';
output += '<param name="ShowToolbar" value="1">';
output += '<param name="AutoStart" value="1">';
output += '<param name="StretchToFit" value="1">';
output += '<BR><B>Axis Media Control</B><BR>';
output += 'The AXIS Media Control, which enables you ';
output += 'to view live image streams in Microsoft Internet';
output += ' Explorer, could not be registered on your computer.';
output += '<BR></OBJECT>';
}
else {
// If not IE for Windows use the browser itself to display
theDate = new Date();
output = '<IMG SRC="';
output += BaseURL;
output += File;
output += '&dummy=' + theDate.getTime().toString(10);
output += '" HEIGHT="';
output += DisplayHeight;
output += '" WIDTH="';
output += DisplayWidth;
output += '" ALT="Camera Image">';
}
document.write(output);
document.Player.ToolbarConfiguration = "play,+snapshot,+fullscreen"
// document.Player.UIMode = "MDConfig";
// document.Player.MotionConfigURL = "/axis-cgi/operator/param.cgi?ImageSource=0"
// document.Player.MotionDataURL = "/axis-cgi/motion/motiondata.cgi";
</SCRIPT>
</td>
</tr>
<tr>
<td>
<?php /*?><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><?php */?>
<?php /*?><img src="AUrelache.jpg" id="1" class="AUrelache" align="center"/> Relacher l'arrêt d'urgence<?php */?>
</td>
<td>

</td>
</tr>
</table>

<?php /*?><img src="3.png" id="2" class="gauche"/>
<img src="4.png" id="2" class="droite"/>
<?php */?>
</body>
</html>

[/javascript]

Édit : En ce qui concerne ton code, il fonctionne au niveau de la BDD, mais l'AU ne se relâche pas quand on clic sur AUrelache :p

par **ghost5922** » 29 mai 2013, 11:53

Voila

[javascript]
function switchAU(images){
var src=images.attr('src');//on récupéré la valeur src de l'image actuelle
if(src=='AU.png'){//si le src vos plus.png alors on initialise la variable img a moin.png
var img='AU1.png';
sendPhp('2','00');
}
else{//sinon elle vos plus.png
var img='AU.png';
sendPhp('2','11');
}
images.attr("src", img);//on modifie le src par la nouvelle valeur
}

$(".AU").mouseup(function(){
if($("#AU").hasClass("AU")==true){
switchAU($(this));
$("#AU").removeClass('AU');
}
});

$(".AUrelache").mouseup(function(){
if($("#AU").hasClass("AU")==false){
sendPhp('2','11');
$("#AU").addClass("AU");
}
});
[/javascript]

par **Lyssorus** » 29 mai 2013, 11:18

Ah oui tu le met dedans carrément !!! Ok je vois :p

Par contre ça ne fonctionne toujours pas ^^'

J'ai les deux états de mon bouton mais si je reclique dessus, il change toujours d'état.

Il ne devrait changer que quand je clique sur AUrelache :/

par **ghost5922** » 29 mai 2013, 11:06

Voila j'ai pas tous verifie mais en effet il avait des erreurs :p ^^

[javascript]

function switchAU(images){
var src=images.attr('src');//on récupéré la valeur src de l'image actuelle
if(src=='AU.png'){//si le src vos plus.png alors on initialise la variable img a moin.png
var img='AU1.png';
sendPhp('2','00');
}
else{//sinon elle vos plus.png
var img='AU.png';
sendPhp('2','11');
}
images.attr("src", img);//on modifie le src par la nouvelle valeur
}

$(".AU").mouseup(function(){
switchAU($(this));
$("#AU").removeClass('AU');
});

$(".AUrelache").mouseup(function(){
sendPhp('2','11');
$("#AU").addClass("AU");
});

[/javascript]

puis <img src="images/1.jpg" id="AU" class="AU" />

par **Lyssorus** » 29 mai 2013, 11:03

Bon comme je le pensais, j'ai du me planter XD

Voilà ce que j'ai fait :

function switchAU(images){
                var src=images.attr('src');//on récupéré la valeur src de l'image actuelle
                if(src=='AU.png'){//si le src vos plus.png alors on initialise la variable img a moin.png
                        var img='AU1.png';
						sendPhp('2','00');
                }
                else{//sinon elle vos plus.png
                        var img='AU.png';
						sendPhp('2','11');                    
                }
                images.attr("src", img);//on modifie le src par la nouvelle valeur
        	}


                $(".AU").mouseup(function(){
                switchAU($(this));      
                                     
			});
			
			$(".AU").removeClass('AU');

                $(".AUrelache").mouseup(function(){
				sendPhp('2','11');
			});

			$(".AUrelache").addClass("AU");

Je crois que j'ai tout mis ^^'

par **Lyssorus** » 29 mai 2013, 10:40

Humm je vois !!!

Je test ça dessuite.

Merci bien

par **ghost5922** » 29 mai 2013, 10:38

ok alors sur ton bouton tu ajoute un id unique

puis l’osque tu clique dessus tu fais

$('#id').removeClass('AU');

cela va retirer la class de l'id puis sur l'autre bouton tu remets la class

$("#id").addClass("AU");

par **Lyssorus** » 29 mai 2013, 10:31

Nan lol, c'est toujours des images qui servent de boutons ^^'

Je sais maintenant à quoi ressemble la boite à bouton du client donc je fais ça bien :p

par **ghost5922** » 29 mai 2013, 10:29

Re,

avant c'est toujours des images ou un vrai bouton <input type"bottom"> ?

par **Lyssorus** » 29 mai 2013, 10:21

Hummm désactiver ? ^^'

Je vois ce que tu veux dire mais pas du tout comment faire ^^'

Dans mon.........$(".AU").mousedown(function(){.......... ?
...............................sendPhp('2','00');
..............................."désactive"
......................});

Et donc, maintenant je sais faire le switchImg grâce à toi, mais comment je fais le switch à partir d'une autre image ?

<hs>Tien je viens de voir une faute d'ailleurs dans mon code lol swtich au lieu de switch lol (moi j'écris toujours swicht avant de me relire XD)</hs>

Édit : À bah si, je met la même classe à mes deux bouton non ?

par **ghost5922** » 29 mai 2013, 10:02

Bonjour,

tu peux le désactive une fois clique puis quand tu clique sur relâche tu le réactive

[RESOLU] Va et viens entre deux boutons.

Répondre

Étendre la vue Revue du sujet : [RESOLU] Va et viens entre deux boutons.

Re: Va et viens entre deux boutons.

Re: Va et viens entre deux boutons.

Re: Va et viens entre deux boutons.

Re: Va et viens entre deux boutons.

Re: Va et viens entre deux boutons.

Re: Va et viens entre deux boutons.

Re: Va et viens entre deux boutons.

Re: Va et viens entre deux boutons.

Re: Va et viens entre deux boutons.

Re: Va et viens entre deux boutons.

Re: Va et viens entre deux boutons.

Re: Va et viens entre deux boutons.

Re: Va et viens entre deux boutons.

Re: Va et viens entre deux boutons.

Re: Va et viens entre deux boutons.