Image qui tourne suite à un clic

Version imprimable

Bonjour,
Merci pour votre aide.

J'ai récuperé un bout de script qui est censsé faire tourner une image suite à un clic.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <html> <head> <style type="text/css"> .rotated-image { -webkit-transform: rotate(40deg); transform: rotate(40deg); } </style> </head> <body> <script> function myFunction() { var img = document.getElementById("image"); img.setAttribute("class", "rotated-image"); } </script> <section id="middle"> <img id="image" src="test.gif" > <button onclick="myFunction()">Click me</button> </section> </body> </html>
Actuellement l'image tourne q"une seule fois et de 40 degrés vers la droite.
Mon problème est que je voudrai que l'image tourne de 40 degrés à chaque clic

Merci pour votre aide

Bonjour,
j'entrevois au moins 2 façon de procéder.

• changement de la class
création de class CSS correspondant chacune à une étape de la rotation
Code:

1 2 3 4 5 6 7 8 9 .rotated-0 {transform: rotate(0);} .rotated-1 {transform: rotate(40deg);} .rotated-2 {transform: rotate(80deg);} .rotated-3 {transform: rotate(120deg);} .rotated-4 {transform: rotate(160deg);} .rotated-5 {transform: rotate(200deg);} .rotated-6 {transform: rotate(240deg);} .rotated-7 {transform: rotate(280deg);} .rotated-8 {transform: rotate(320deg);}
ensuite dans ta fonction tu récupéres le numéro de la classe via un split() et tu incrémentes
Code:

1 2 3 4 5 6 function myFunction() { var img = document.getElementById("image"); var c = img.className.split('-'); // c[0] contient 'rotated' et c[1] le numéro de la class c = c[0] +'-' +((parseInt( c[1]) +1 )% 9) // on incrémente et on tourne à 8 img.setAttribute("class", c); }
Nota :
il te faut mettre la class="rotated-0" sur ton image pour le début

Code:

<img id="image" src="nom_immage.jpg" class="rotated-0">

• changement en live de transform
récupération de l'angle dans la propriété style.transform de l'image, incrémentation et application
Code:

1 2 3 4 5 6 function myFunction() { var img = document.getElementById("image"); var t = img.style.transform.match(/(\d+)/g) || [0]; // on met ||[0) pour le 1st passage var val = ( t[0] *1 +40) % 360; // incrémentation de 40 img.style.transform = 'rotate(' +val +'deg)'; }

re,

Merci pour ta réponse rapide et surtout efficace 8O

j'ai choisi pour info la deuxième solution

ci-joint le code actuel

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
<head>
<style type="text/css">
.rotated-image {
-ms-transform: rotate(36deg); /* IE 9 */
-webkit-transform: rotate(36deg); /* Chrome, Safari, Opera */
-moz-transform: rotate(36deg);  /* FF3.5/3.6 */
-o-transform: rotate(36deg);  /* Opera 10.5 */
-sand-transform: rotate(36deg);
transform: rotate(36deg);
}
</style>
</head>
<body>
<script> 
function myFunctionDroite() {
  var img = document.getElementById("image");
  var t = img.style.transform.match(/(\d+)/g) || [0];  // on met ||[0) pour le 1st passage
  var val = ( t[0] *1 +36) % 360;                      // incrémentation de 40
  img.style.transform = 'rotate(' +val +'deg)';
}
function myFunctionGauche() {
  var img = document.getElementById("image");
  var t = img.style.transform.match(/(\d+)/g) || [0];  // on met ||[0) pour le 1st passage
  var val = ( t[0] *1 +(360 -36)) % 360;                      // incrémentation de 40
  img.style.transform = 'rotate(' +val +'deg)';
}
</script> 
 
<section id="middle">
<img id="image" src="test.gif" >   
    <button onclick="myFunctionGauche()"> Gauche </button>
    <button onclick="myFunctionDroite()"> Droite </button>
</section>
</body>
</html>

par contre avant de mettre résolu pour se sujet peux tu me dire comment faire pour afficher à l’écran le degré de rotation ?

Par avance merci

Il te suffit d'afficher la valeur qui se trouve dans la variable val via par exemple

Code:

document.getElementById('angle').textContent = val +'\u00B0';

pour peu que tu ais un élément dans ton code ayant pour id="angle".

Une remarque quand même sur tes fonctions, il suffit de faire une seule fonction en passant en paramètre le sens +1/-1, inutile de les multiplier.
Code:

1 2 3 4 5 6 7 8 9 10 11 function myFunction(sens) { var img = document.getElementById("image"); // changement de la regExp pour récupérer le signe var t = img.style.transform.match(/(\+?\-?\d+)/g) || [0]; // on met ||[0) pour le 1st passage // suppression du modulo 360 var val = (( t[0] *1 +(36 *sens))); // incrémentation de 36 // application de la rotation img.style.transform = 'rotate(' +val +'deg)'; // affichage de l'angle document.getElementById('angle').textContent = val +'\u00B0'; }
il suffit maintenant d’appeler les fonctions comme suit
Code:

1 2 3 4 <button onclick="myFunction(-1)">Gauche</button> <button onclick="myFunction(1)">Droite</button>  <span id="angle"></span>

woah respect 8O

mais il y a un problème j'arrive a avoir des angles à 756° alors que le max est 360° sauf erreur de ma part !!!!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
<head>
<style type="text/css">
.rotated-image {
-ms-transform: rotate(36deg); /* IE 9 */
-webkit-transform: rotate(36deg); /* Chrome, Safari, Opera */
-moz-transform: rotate(36deg);  /* FF3.5/3.6 */
-o-transform: rotate(36deg);  /* Opera 10.5 */
-sand-transform: rotate(36deg);
transform: rotate(36deg);
}
</style>
</head>
<body>
<script> 
function myFunction(sens) {
  var img = document.getElementById("image");
  // changement de la regExp pour récupérer le signe
  var t = img.style.transform.match(/(\+?\-?\d+)/g) || [0];  // on met ||[0) pour le 1st passage
  // suppression du modulo 360
  var val = (( t[0] *1 +(36 *sens)));                        // incrémentation de 36
  // application de la rotation
  img.style.transform = 'rotate(' +val +'deg)';
  // affichage de l'angle
  document.getElementById('angle').textContent = val +'\u00B0';
}
</script> 
<section id="middle">
 
    <img id="image" src="test.gif" >  
<button onclick="myFunction(-1)">Gauche</button>
<button onclick="myFunction(1)">Droite</button>    
<!-- pour affichage de l'angle -->
<span id="angle"></span>
</section>
 
</body>
</html>

merci pour ton aide

02/05/2016, 22h26
NoSmoking

Citation:

...sauf erreur de ma part

un looping c'est un 360°, un double looping c'est un 720° etc...

Pour l'affichage tu peux faire un « modulo 360 »

Code:

document.getElementById('angle').textContent = val% 360 +'\u00B0';
03/05/2016, 08h13
krapoulos

Rien de méchant dans ma remarque, c'etait pour moi !!

Sinon merci, respect et profil bas pour ta disponibilité et surtout pour tes compétences indéniables.

Merci encore

:oops:

Bonjour,

fort du code de Nosmoking ;) , je me suis amusé à faire un petit script : http://codepen.io/jreaux62/pen/EKOdYE

Code:

1
2
3
4
5
6
7
8
9
10
 
<div style="text-align:center;">
  <button onclick="rotationImgSens('image', 30, -1);">-30°</button>
  <input type="number" id="rotateImgNbre" value="0" ; min="-360" max="360" onchange="rotationImgId('image', this.value);">°
  <button onclick="rotationImgSens('image', 30, 1);">+30°</button>
  <br />-360<input type="range" id="rotateImgRange" value="0" ; min="-360" max="360" onchange="rotationImgId('image', this.value)" />360
  <br /><span id="angle2 "></span>
 
  <img id="image" src="http://www.developpez.net/template/images/logo.png ">
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
img {
  margin: 100px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
 
#rotateImgNbre {
  display: inline-block;
  width: 50px;
  text-align: center;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function rotationImgSens(id, incr, sens) {
  var img = document.getElementById(id);
  // changement de la regExp pour récupérer le signe
  // on met ||[0) pour le 1st passage
  var t = img.style.transform.match(/(\+?\-?\d+)/g) || [0];
  var val = ((t[0] * 1 + (incr * sens)));
  rotationImgId(id, val);
}
 
function rotationImgId(id, val) {
  var img = document.getElementById(id);
  // application de la rotation
  img.style.WebkitTransform = 'rotate(' + val + 'deg)'; // Chrome - safari
  img.style.MozTransform = 'rotate(' + val + 'deg)'; // Firefox
  img.style.MsTransform = 'rotate(' + val + 'deg)'; // Internet Explorer > 9
  img.style.Otransform = 'rotate(' + val + 'deg)'; // Opera
  img.style.transform = 'rotate(' + val + 'deg)'; // all
  document.getElementById('rotateImgNbre').value = val;
  document.getElementById('rotateImgRange').value = val % 360;
}

Bonjour,

Merci pour vos réponses et votre aide précieuse.

J'ai essayé de récuperer la variable angle en php (oui, le JS est coté client et le PHP coté serveur). Mais il doit y avoir une solution (certe que je maitrise pas).

Voilà mon code à aujourd'hui :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
<head>
<style type="text/css">
.rotated-image {
-ms-transform: rotate(36deg); /* IE 9 */
-webkit-transform: rotate(36deg); /* Chrome, Safari, Opera */
-moz-transform: rotate(36deg);  /* FF3.5/3.6 */
-o-transform: rotate(36deg);  /* Opera 10.5 */
-sand-transform: rotate(36deg);
transform: rotate(36deg);
}
</style>
</head>
<body>
<script> 
function myFunction(sens) {
  var img = document.getElementById("image");
  // changement de la regExp pour récupérer le signe
  var t = img.style.transform.match(/(\+?\-?\d+)/g) || [0];  // on met ||[0) pour le 1st passage
  // suppression du modulo 360
  var val = (( t[0] *1 +(36 *sens)));                        // incrémentation de 36
  // application de la rotation
  img.style.transform = 'rotate(' +val +'deg)';
  // affichage de l'angle
  /*document.getElementById('angle').textContent = val +'\u00B0'; */
  //document.getElementById('angle').textContent = val% 360 +'\u00B0';
  document.getElementById('angle').textContent = val% 360 ;
 
}
</script> 
<section id="middle">
 
    <img id="image" src="test.gif" >  
<button onclick="myFunction(-1)">Gauche</button>
<button onclick="myFunction(1)">Droite</button>    
<!-- pour affichage de l'angle -->
<?PHP
$mavaleur = '<span id="angle"></span>';
?>
</section>
 
<?PHP
echo "L'angle actuel est de : ".$mavaleur;
?>
 
</body>
</html>

Je pense qu'il doit y avoir un moyen de récuperer cette donnée.

Sinon j'ai une deuxième question :

- Comment faire pour afficher la rotation d'image sous IE version antérieure ou égale à 8 ?

Encore merci pour votre aide.

Cdlt

03/05/2016, 14h14
NoSmoking

Citation:

J'ai essayé de récuperer la variable angle en php...

Il y a moyen de récupérer la donnée, il suffit une fois modifier d'envoyer la valeur coté serveur en utilisant l'Ajax.

Citation:

Comment faire pour afficher la rotation d'image sous IE version antérieure ou égale à 8 ?

là je te vois mal partie dans ta quête du moins de 1% et encore les grands jours. La méthode utilisé ici est sur base du CSS3 donc forcément certaines versions de navigateurs sont hors course.

Un tel animation est pour moi de la « poudre aux œils » et donc tant pis, ou tant mieux c'est suivant le point de vue, pour ceux qui ne la verront pas. Dans le même ordre d'idée il me semble complétement inutile de mettre les préfixes propriétaire.

Quoiqu'il arrive si cette animation est primordiale pour ton site, et ce quelque soit le navigateur, il va te falloir passer par la grosse cavalerie comme par exemple http://jqueryrotate.com/
03/05/2016, 14h44
krapoulos
Oui tu as entierement raison pour les 1% d'utilisateurs de IE < 9.
Donc pas la peine d'abuser de votre patience.
Vous m'avez déjà énormément aidé sur ce post.

en modifiant une ligne de ton script

Code:

document.getElementById('angle').textContent = (val% 360)/36 ;

j'obtiens des nombres de 0 à 9 que je recupère via l'id

Si je mets dans le code JS ce complement de code :
Code:

1 2 3 var decompte = (val% 360)/36 ; if ( decompte == 0 ) {<?PHP $valeur = "0"; ?>} else if ( decompte == 1 ) {<?PHP $valeur = "1"; ?>}
et dans la <section>

Code:

<?PHP echo "-> ".$valeur; ?>

l'image tourne bien, je recupere bien les angles mais l'echo reste toujours à 1 ?

Pouvez-vous m'aider ?
03/05/2016, 15h00
NoSmoking

Tu l'as dis toi même javascript -> client, PHP -> serveur donc

Citation:

il suffit une fois modifier d'envoyer la valeur coté serveur en utilisant l'Ajax.

mais pourquoi vouloir modifier cet « echo » ?
03/05/2016, 15h20
krapoulos

Oui

je t'explique mon projet

c'est une variante de la roulette russe, j'ai une image de barillet avec dix emplacements pour des balles.
a chaque coup le barillet tourne et dans le barillet une balle qui se trouve dans un emplacement.

donc avec ton script un coup et pouf le barillet tourne d'un cran (il passe de 0 à 1) et ainsi de suite. et je dois recuperer la position actuelle et faire en php la comparaison avec l'emplacement de la balle.

D'ou la necessité de recuperer la position actuelle en php.

Je ne c pas si je suis clair ds mes explications.

Merci pour ton aide
03/05/2016, 19h51
NoSmoking

Donc la réponse t'a été donnée, Ajax.
Sinon tu peux peut-être gérer cela entièrement coté client.