# Tourner image de 180° avec JS



## Langellier (15 Octobre 2007)

Bonjour,
Je souhaiterais faire subir une rotation de 180° à une image gif. Flash le fait très bien.
Mais je voudrais utiliser du javascript : en passant sur l'image orientée normalement, je voudrais qu'elle tourne de 180°. Bien sûr je pourrais dupliquer l'image et l'inverser avec par exemple GraphicConverter, mais c'est bête comme méthode : pq 2 images qd une seule devrait suffire ?
Voici un exemple avec flash :
http://perso.orange.fr/bernard.langellier/illusions/humeur.html
Je veux la même chose en Javascript !


----------



## Anonyme (15 Octobre 2007)

Hop 

Pas testé


----------



## Langellier (15 Octobre 2007)

gloup gloup a dit:


> Hop
> Pas test&#233;


J'ai jet&#233; un oeil sur le fichier js : jquery.rotate.1-1.js
Mais je n'en ai pas compris la logique, donc je ne sais pas comment appeler la fonction depuis le fichier html.
Voici un squellette de code source possible o&#249; j'appelle le fichier js dans le head et la fonction dans le body :

```
<html>
<head>
<script type="text/Javascript" src="jquery.rotate.1-1.js"></script>
</head>
<body>
<h1>Rotation d'une image</h1>
<p><a href="javascript:void(0)" onclick="rotateLeft([angle=180])";return false">
<img src="inversion.png" width="145" height="200" alt="inversion" /></a></p>
</body>
</html>
```
Mais &#231;a marche pas  
NB : Bien s&#251;r ce script suppose que le fichier js soit dans le m&#234;me dossier que fichier html.
On peut aussi mettre l'image &#224; tourner dans un div et utiliser une feuille de style.
Merci de mexpliquer comment je dois appeler une fonction de rotation qui serait dans le fichier js externe.


----------



## Anonyme (15 Octobre 2007)

Je suis en train de tester et ça n'a pas l'air de fonctionner très bien

Il faut charger la librairie jquery avant d'utiliser le fichier js :


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Image à l'envers'</title>
  <script type="text/javascript" src="js/jquery-1.2.1.pack.js"></script>
  <script type="text/javascript" src="js/jquery.rotate.1-1.js"></script>
    <script type="text/javascript" charset="utf-8">
        $('#theimage').rotateLeft(180);
    </script>
    
</head>

<body>
    <div >
        <img id="theimage" src="image.jpg" />
    </div>


</body>
</html>
```
Je continue à chercher


----------



## Anonyme (15 Octobre 2007)

Bon d&#233;sol&#233; mais ce script provoque des erreurs et l'auteur n'a m&#234;me pas mis une page d'exemple&#8230;


----------



## Warflo (15 Octobre 2007)

Je n'ai pas essay&#233;, mais connaissant un peu jQuery, essaye &#231;a:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Image &#224; l'envers'</title>
  <script type="text/javascript" src="js/jquery-1.2.1.pack.js"></script>
  <script type="text/javascript" src="js/jquery.rotate.1-1.js"></script>
    <script type="text/javascript" charset="utf-8">
       $(document).ready(function(){
                  $("#theimage").click(function(){
                         $(this).rotateLeft(180);
                  });
       });
    </script>
</head>

<body>
    <div >
        <img id="theimage" src="image.jpg" />
    </div>
</body>
</html>
```
Normalement un click sur l'image la retourne.


----------



## Anonyme (15 Octobre 2007)

Warflo a dit:


> Je n'ai pas essay&#233;, mais connaissant un peu jQuery, essaye &#231;a:
> (&#8230
> 
> Normalement un click sur l'image la retourne.



Bravo, &#231;a marche!!! 

edit: par contre Safari&#8230;


----------



## Langellier (16 Octobre 2007)

gloup gloup a dit:


> Bravo, ça marche!!!
> edit: par contre Safari


Merci pour ces scripts.
Malheureusement cela ne fonctionne qu'avec Firefox et Opéra ; et seules les images jpeg acceptent d'être renversées ! (Pourquoi  ??)
Voici le résultat :
http://perso.orange.fr/bernard.langellier/illusions/inversion2.htm

NB : Voici l'adresse pour télécharger la librairie JQuery =
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.1.pack.js

Amélioration envisagée : j'aimerais voir l'image tourner comme ici :
http://www.walterzorn.com/rotate_img/rotate_img.htm
(rotation qui fonctionne ici avec safari),
puis revenir à sa position de départ.


----------



## Langellier (16 Octobre 2007)

Warflo a dit:


> Je n'ai pas essayé, mais connaissant un peu jQuery, essaye ça:
> ....
> Normalement un click sur l'image la retourne.


Merci, je n'aurais jamais réussi seul.


----------



## Warflo (16 Octobre 2007)

Si jQuery t'interesse (et c'est une librairie très très très interessante), la documentation de jquery.com est assez bien faites.


----------



## Langellier (15 Janvier 2012)

Voici la rotation d'une image en html5 avec canvas et javascript


----------



## Langellier (2 Janvier 2014)

Langellier a dit:


> Voici la rotation d'une image en html5 avec canvas et javascript



Je me suis mis à réaliser des dessins avec Canvas, donc sans faire appel à des fichiers images de type png par exemple. Je voudrais faire un double en rotation d'un premier dessin canvas.
Voici un exemple : 
Illusion du carré incliné
J'ai ici malheureusement un code redondant : la 2e image étant la 1e avec une rotation de 45°.
Je recherche une fonction du genre function rotation() qui éviterait la répétition.
Voici un extrait du code source à améliorer :

```
<script>
function tracercarre()
{
var canvas = document.getElementById("carre"); 
var context = canvas.getContext("2d");
context.beginPath();
context.translate(5, 10);
context.fillStyle = "#003399";
context.rect(10,10,200,200);
context.closePath();
context.fill();
...
}
function tracercarreincline()
{
var canvas = document.getElementById("carreincline"); 
var context = canvas.getContext("2d");
context.beginPath();
context.translate(150,0);
context.rotate(45 * Math.PI / 180);
context.fillStyle = "#003399";
context.rect(10,10,200,200);
context.closePath();
context.fill();
...
}
</script>

<body onload="tracercarre();tracercarreincline()">
<canvas id="carre" width="320" height="320"></canvas>
<canvas id="carreincline" width="320" height="320"></canvas>
```


----------



## AntoninCarlin (26 Janvier 2014)

Bonjour à tous ! Pourquoi javascript ? CSS3 le fait très bien !. 


> img:active {
> -webkit-transform: rotate(180deg);
> -moz-transform: rotate(180deg);
> -ms-transform: rotate(180deg);
> ...



Arf, j'avais pas regardé l'exemple, il faut que ça reste dans la position. Je cherche ça !!


----------

