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é

J'ai jeté 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ù j'appelle le fichier js dans le head et la fonction dans le body :

Bloc de code:

<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 ça marche pas

NB : Bien sûr ce script suppose que le fichier js soit dans le même dossier que fichier html.
On peut aussi mettre l'image à 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 :

Bloc de code:

<!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ésolé mais ce script provoque des erreurs et l'auteur n'a même pas mis une page d'exemple…

Warflo · 15 Octobre 2007

Je n'ai pas essayé, mais connaissant un peu jQuery, essaye ça:

Bloc de code:

<!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é, mais connaissant un peu jQuery, essaye ça:
(&#8230

Normalement un click sur l'image la retourne.

Bravo, ça marche!!! :up:

edit: par contre Safari…

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 :

Bloc de code:

<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);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

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

Tourner image de 180° avec JS

Langellier

Membre actif

Anonyme

Invité

Langellier

Membre actif

Anonyme

Invité

Anonyme

Invité

Warflo

Membre expert

Anonyme

Invité

Langellier

Membre actif

Langellier

Membre actif

Warflo

Membre expert

Langellier

Membre actif

Langellier

Membre actif

AntoninCarlin

Membre confirmé

Sujets similaires