Image qui tourne suite à un clic

**krapoulos** · 02/05/2016, 17h02

Bonjour,
Merci pour votre aide.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 02/05/2016, 19h14

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)';
}

**krapoulos** · 02/05/2016, 20h32

re,

Merci pour ta réponse rapide et surtout efficace

j'ai choisi pour info la deuxième solution

ci-joint le code actuel

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 02/05/2016, 22h05

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<button onclick="myFunction(-1)">Gauche</button>
<button onclick="myFunction(1)">Droite</button>    
<!-- pour affichage de l'angle -->
<span id="angle"></span>

**krapoulos** · 02/05/2016, 22h21

woah respect

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 02/05/2016, 22h26

...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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**krapoulos** · 03/05/2016, 08h13

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

Invité · 03/05/2016, 08h15

Bonjour,

fort du code de Nosmoking

, je me suis amusé à faire un petit script : http://codepen.io/jreaux62/pen/EKOdYE

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

**krapoulos** · 03/05/2016, 11h41

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 03/05/2016, 14h14

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.

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/

**krapoulos** · 03/05/2016, 14h44

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Pouvez-vous m'aider ?

**NoSmoking** · 03/05/2016, 15h00

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

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

mais pourquoi vouloir modifier cet « echo » ?

**krapoulos** · 03/05/2016, 15h20

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

**NoSmoking** · 03/05/2016, 19h51

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

Image qui tourne suite à un clic

JavaScript

Discussions similaires

Partager

Partager