PHPfrance

la communauté d'entraide francophone dédiée au PHP

[RESOLU] Bouton poussoir avec image

31 messages
   Outils de sujet
ghost5922
Mammouth du PHP | 619 Messages

07 mai 2013, 15:22

en faite le float:left va aligne toutes les images cote a cote

tu peux essaye de mettre un float:right sur les images a droite

mais le mieux serai de faire plusieurs div exemple

<div style="float:left; width:300px;">
<img src="1.png" id="1" class="gauche" style="float:left; margin:0;"/>
<img src="2.png" id="1" class="droite" style="float:left; margin:0;"/>
</div>
<div style="float:left; width:300px;">
<img src="3.png" id="2" class="gauche"/>
<img src="4.png" id="2" class="droite"/>
</div>
Eléphant du PHP | 160 Messages

07 mai 2013, 15:38

Alors le div je veux bien je faire, enfin j'aimerais bien faire au plus simple :p

Donc si le div peut me sauver lol je prend.

Bon par contre j'ai essayé ça n'a pas très bien fonctionné :/ J'ai du encore faire un truc de travers ^^'.

Par contre avec ça :
<img src="1.png" id="1" class="gaucheMat" style="float:left; margin:0;"/>
<img src="2.png" id="1" class="droiteMat" style="float:left; margin:0;"/>
<img src="3.png" id="1" class="AU" style="float:left; margin:0;"/>
<img src="4.png" id="1" class="gaucheTete" style="float:left; margin:0;"/>
<img src="5.png" id="1" class="droiteTete"/><br>
<img src="6.png" id="1" class="rotationGauche" style="float:left; margin:0;"/>
<img src="7.png" id="1" class="moins" style="float:left; margin:0;"/>
<img src="8.png" id="1" class="plus" style="float:left; margin:0;"/>
<img src="9.png" id="1" class="rotationDroite" style="float:left; margin:0;"/>
J'arrive à avoir ça qui est pas trop mal, plus qu'un petit soucis :
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.
Eléphant du PHP | 160 Messages

07 mai 2013, 15:51

Mais quel mauvais....
C'est bon j'ai trouvé, c'est mon image qui a un blanc... J'avais pourtant fait attention bref, c'est bon ;)

Pour le moment lol.

Merci beaucoup !!!! :)
Eléphant du PHP | 160 Messages

07 mai 2013, 16:39

Bon aller je reviens (et oui déjà :p)

Parce que maintenant j'aimerais que mes boutons change de position à l'image donc j'ai deux images, bouton à droite, bouton à gauche, et j'aimerais que ça switch quand j'appuie dessus.

Il doit être possible de mettre une variable dans le script, à 0 ou à 1 pour avec un if afficher l'une ou l'autre des images non ?
Mammouth du PHP | 619 Messages

07 mai 2013, 16:41

tu veux cacher une image et l'affiche quand on clique sur une autre image ?

exemple on clique sur l'image gauche tu veux cache cette image et faire apparaître l'image droite ?
Eléphant du PHP | 160 Messages

07 mai 2013, 16:47

Huuummm, ce n'est pas vraiment ça.

En fait celle les images 1 et 2 c'est un "joystick" qui fait droite/gauche, donc ça je m'en fiche.

Mais par exemple le bouton - < +, c'est un switch à deux positions stables, donc tu le tourne à gauche, clic tu es sur - "\" et tu le tourne à droite, clic tu es sur + "/"
J'aimerais mettre mes deux images et quand tu clique dessus qu'il passe d'une position à l'autre.
Le coup d'en cacher une n'est pas idiot du tout :p

Bon comme tu le disais, Jquery est génial :)

J'ai donc trouvé ça $(".target").hide();

Donc pas de soucis pour le mettre en place ça fonctionne, par contre maintenant il va me falloir superposer deux images pour pas que ça me casse tout :/ comment qu'on peut bien réussir à faire ça ? :p
Mammouth du PHP | 619 Messages

07 mai 2013, 17:14

alors deux solution

sois tu modifie directement le src de l'image (tu recupere l'attribut src si elle revient a l'image 1 tu modifie par la deux et inversement)

ou alors tu affiche ou cache l'image pour les alignes il faut jouer avec margin-left:-tailledeton image;
Eléphant du PHP | 160 Messages

13 mai 2013, 09:11

Bonjour,

J'espère que vous avez tous passé un bon "week-end" (pour ceux qui ont fait le pont)

Me voici donc de retour pour vous embêter un peu :)

Alors voilà, pour l'instant ça fonctionne en cachant une image, mais, au départ comme aucune des deux n'est encore caché, j'ai les deux images l'une à coté de l'autre. Après un clic sur une, ça revient dans l'ordre et c'est beau :).

J'aurais bien voulu tester ta solution 1, où tu parle de modifier la source de l'image, j'ai essayé de faire :
$(".moins").mouseup(function(){
				sendPhp('5','01');
				$src = 'switch+.png';
                                $classe = 'plus';
				//$(".moins").hide();
				//$(".plus").show();
			})
$(".plus").mouseup(function(){
				sendPhp('5','10');
				$src = 'switch-.png';
                                $classe = 'moins';
				//$(".plus").hide();
				//$(".moins").show();
			})


<body>
<?
echo '<img src="'.$src.'" id="1" class="'.$classe.'" style="float:left; margin:0;"/>';
...
Mais cela ne fonctionne pas, au début plus de switch du tout, j'ai donc forcé $src = + et $classe = plus mais le bouton semble ne plus fonctionner.

Je pense que je n'ai pas très bien compris comment modifier directement le src de l'image ^^'.

De plus, je viens de penser que dans l'idéal, il faudrait que se soit la BDD (qui elle sera relié directement à l'automate) qui décide de la position du bouton, histoire qu'au démarrage, l'état du bouton virtuel corresponde à l'état physique de l'automate. :)

Donc je sais comment lire la BDD mais après comment je fait pour que la valeur me change l'image ? Là je ne vois pas :/
Mammouth du PHP | 619 Messages

13 mai 2013, 10:15

Bonjour,

voila une fonction switchImg

si l'image est plus.png alors on change l'image en moin.png ou inversement



[javascript]
<script type="text/javascript">
$(document).ready(function () {
$(".plusoumoin").mouseup(function(){
switchImg($(this));//on appelle la fonction et on lui donne en paramètre l'objet
})

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

</script>
[/javascript]

voila pour le moment j'ai mi la class plusoumoin et l'image c'est plus.png ou moin.png
Eléphant du PHP | 160 Messages

13 mai 2013, 11:51

Je n'avais rien qui fonctionnais mais en m'étant ce que j'avais compris dans se message, j'ai résolu mon problème.

J'ai donc ajouté mes sendPhp pour que ça communique avec la BDD et ça roule.

Mon erreur c'est que j'avais laisser le src="'.src.'" alors que comme c'est tout l'attribut qui change on y touche pas ^^'.

Merci beaucoup :)

La suite est le message que j'étais en train d'écrire.

"Hum, j'ai encore du faire une boulette.

Si j'ai bien compris dès lors que l'on relâche le bouton de la sourie sur un objet de la classe plusoumoin on appel la fonction switchImg et on lui passe un paramètre qui doit donc être "plusoumoin" je suppose.

Ensuite la fonction switchImg, elle récupère l'attribut src de l'objet de la classe "plusoumoin" puis si cet attribut est égale à "plus.png" elle stock "moin.png" dans img (pareille pour le else).

Enfin images.attr remplace l'attribut src de l'objet de classe "plusoumoin" par ce qui est contenu dans img.

Ce qui devrait changer l'image affichée.

J'ai tout bien compris ?

Alors si j'ai bien compris, vu que ça fonctionne pas j'ai du faire une boulette :p."
Mammouth du PHP | 619 Messages

13 mai 2013, 12:07

Bonjour,

Si j'ai bien compris dès lors que l'on relâche le bouton de la sourie sur un objet de la classe plusoumoin on appel la fonction switchImg et on lui passe un paramètre qui doit donc être "plusoumoin" je suppose.

non on donne a la fonction le paramétré l'objet du click postez votre code complet que je puise voir :)
Eléphant du PHP | 160 Messages

13 mai 2013, 12:23

Ahh zut, je pensais avoir compris !! Roo flut de zut :D

" votre code " ? On se vouvoies maintenant :(
Bah comme vous voulez :)

Alors le code complet : 
<!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
                  }
          });
        }

			$(".gaucheMat").mouseup(function(){
				sendPhp('1','00');
			}).mousedown(function(){
				sendPhp('1','10');
			});

			$(".droiteMat").mouseup(function(){
				sendPhp('1','00');
			}).mousedown(function(){
				sendPhp('1','01');
			});
			
			$(".AU").mousedown(function(){
				sendPhp('2','00');
			});
			
			$(".gaucheTete").mouseup(function(){
				sendPhp('3','00');
			}).mousedown(function(){
				sendPhp('3','10');
			});
			
			$(".droiteTete").mouseup(function(){
				sendPhp('3','00');
			}).mousedown(function(){
				sendPhp('3','01');
			});
			
			$(".rotationGauche").mouseup(function(){
				sendPhp('4','00');
			}).mousedown(function(){
				sendPhp('4','10');
			});
			
			$(".plusoumoins").mouseup(function(){
                                swtichImg($(this));//on appelle la fonction et on lui donne en paramètre l'objet
        	
       
        	                function swtichImg(images){
                                        var src=images.attr('src');//on récupéré la valeur src de l'image actuelle
                                        if(src=='switch+.png'){//si le src vos plus.png alors on initialise la variable img a moin.png
                                                var img='switch-.png';
						sendPhp('5','10');
                                        }
                                        else{//sinon elle vos plus.png
                                                var img='switch+.png';
						sendPhp('5','01');                    
                                       }
                                       images.attr("src", img);//on modifie le src par la nouvelle valeur
        	                }                                      
			});			
			
			$(".rotationDroite").mouseup(function(){
				sendPhp('4','00');
			}).mousedown(function(){
				sendPhp('4','01');
			});
			
			$(".AUrelache").mousedown(function(){
				sendPhp('2','11');
			});
 
});

</script>
</head>
<? 
//$src = '+';
//$classe = 'plus';
?>
<body>
<!--
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

-->
<img src="1.png" id="1" class="gaucheMat" style="float:left; margin:0;"/>
<img src="2.png" id="1" class="droiteMat" style="float:left; margin:0;"/>
<img src="3.png" id="1" class="AU" style="float:left; margin:0;"/>
<img src="4.png" id="1" class="gaucheTete" style="float:left; margin:0;"/>
<img src="5.png" id="1" class="droiteTete"/><br>
<img src="6.png" id="1" class="rotationGauche" style="float:left; margin:0;"/>
<img src="switch+.png" id="1" class="plusoumoins" style="float:left; margin:0;"/>
<img src="9.png" id="1" class="rotationDroite" style="float:left; margin:0;"/>
<br><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"/>

</body>
</html>
Et encore une fois, merci pour ce temps passé à me conseiller et m'aider à trouver des solutions... C'est vraiment sympa :)
Mammouth du PHP | 619 Messages

13 mai 2013, 12:29

Bonjour,

vous tu je me mélange un peu les pinceaux ^^


sinon la fonction faut pas la mettre dans l’événement
<!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
                  }
          });
        }

                        $(".gaucheMat").mouseup(function(){
                                sendPhp('1','00');
                        }).mousedown(function(){
                                sendPhp('1','10');
                        });

                        $(".droiteMat").mouseup(function(){
                                sendPhp('1','00');
                        }).mousedown(function(){
                                sendPhp('1','01');
                        });
                        
                        $(".AU").mousedown(function(){
                                sendPhp('2','00');
                        });
                        
                        $(".gaucheTete").mouseup(function(){
                                sendPhp('3','00');
                        }).mousedown(function(){
                                sendPhp('3','10');
                        });
                        
                        $(".droiteTete").mouseup(function(){
                                sendPhp('3','00');
                        }).mousedown(function(){
                                sendPhp('3','01');
                        });
                        
                        $(".rotationGauche").mouseup(function(){
                                sendPhp('4','00');
                        }).mousedown(function(){
                                sendPhp('4','10');
                        });
                        
                        $(".plusoumoins").mouseup(function(){
                                swtichImg($(this));//on appelle la fonction et on lui donne en paramètre l'objet
                                     
                        });                     
                        
                        $(".rotationDroite").mouseup(function(){
                                sendPhp('4','00');
                        }).mousedown(function(){
                                sendPhp('4','01');
                        });
                        
                        $(".AUrelache").mousedown(function(){
                                sendPhp('2','11');
                        });
						
						 function swtichImg(images){
								var src=images.attr('src');//on récupéré la valeur src de l'image actuelle
								if(src=='switch+.png'){//si le src vos plus.png alors on initialise la variable img a moin.png
										var img='switch-.png';
										sendPhp('5','10');
								}
								else{//sinon elle vos plus.png
										var img='switch+.png';
										sendPhp('5','01');                    
							   }
							   images.attr("src", img);//on modifie le src par la nouvelle valeur
						} 
 
});

</script>
</head>

<body>
<!--
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

-->
<img src="1.png" id="1" class="gaucheMat" style="float:left; margin:0;"/>
<img src="2.png" id="1" class="droiteMat" style="float:left; margin:0;"/>
<img src="3.png" id="1" class="AU" style="float:left; margin:0;"/>
<img src="4.png" id="1" class="gaucheTete" style="float:left; margin:0;"/>
<img src="5.png" id="1" class="droiteTete"/><br>
<img src="6.png" id="1" class="rotationGauche" style="float:left; margin:0;"/>
<img src="switch+.png" id="1" class="plusoumoins" style="float:left; margin:0;"/>
<img src="9.png" id="1" class="rotationDroite" style="float:left; margin:0;"/>
<br><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"/>

</body>
</html>
Eléphant du PHP | 160 Messages

13 mai 2013, 14:45

Ok merci bien.

C'est vrai que c'est plus joli quand tout est à sa place.

Mais ça fonctionne aussi comme je l'avais mis :p
Mammouth du PHP | 619 Messages

13 mai 2013, 15:05

Bonjour,

oui cela fonctionne car la fonction et charge en même temps mais si par la suite tu as besoin de cette fonction elle ne sera pas charge or si tu l'as mets en dehors tu peux réutilisé cette fonction ailleurs ;)

ps : si tous fonctionne comme tu le souhaite peux tu mettre ton sujet en résolut si c'est le cas bien sur ;)
   Répondre
31 messages
   Outils de sujet