1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Faire une ROTATION d'une image avec HTML ou JAVASCRIPT ?

maxxcbenny Messages postés 5 Date d'inscription vendredi 29 octobre 2004 Statut Membre Dernière intervention 31 décembre 2004 - 30 oct. 2004 à 16:16
cs_jperre Messages postés 268 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 19 janvier 2017 - 18 nov. 2011 à 22:33
Bonjour,

Quelqu'un connait-il le moyen de faire subir une rotation à une image dans un navigateur web ? Avec un angle libre de 0° à 360° évidement ?

Parce que faire des zooms, des scrollings et des diaporamas, il n'y a pas de problème, mais une rotation en HTLM ou JAVASCRIPT, ça c'est chaud non ?

Merci d'avance à celui qui connait la soluce...
A voir également:

9 réponses

Réponse 1 / 9
alcoveforlove Messages postés 12 Date d'inscription mercredi 8 décembre 2004 Statut Membre Dernière intervention 18 novembre 2011 1
18 nov. 2011 à 20:17
avec SVG 100% compatible avec firefox le meilleur navigateur () il est possible de faire beaucoup de chose. Voici un code qui permet de déplacer et d'exécuter la rotation d'une image (qu'il faut mettre dans le même dossier svp et ne pas oublier sinon ça n'affichera rien) :

<?xml version="1.0" encoding="utf-8"?>
<html>

<head>

<style type="text/css">
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color : #fff;
}

</style>

</head>




<script type="text/javascript">

var oh = document.body.offsetHeight; // taille de l'écran
var ow = document.body.offsetWidth;
var svgNS = "http://www.w3.org/2000/svg";


svg = document.createElementNS(svgNS,"svg"); // créer une zone svg
document.body.appendChild(svg); // l'insérer dans le body

var idobj = 0; // compteur d'objet rondOBJ ne sert pas à grand-chose ici


function rondOBJ()
{
that = this;
this.o = document.createElementNS(svgNS,"image"); // créer une image svg
this.x = ow/2.5; // positionner à peu près au milieu de l'écran
this.y = oh/2.5;
this.angle = 90; // définir l'angle de départ

this.o.setAttribute("x",this.x); // positionner l'image en x
this.o.setAttribute("y",this.y); // positionner l'image en y
this.o.setAttribute("width","150"); // taille de l'image en largeur
this.o.setAttribute("height","90"); // taille de l'image en hauteur
this.o.setAttributeNS("http://www.w3.org/1999/xlink","href","avion.gif"); // xlink:href path de l'image

this.o.setAttribute("transform","rotate("+that.angle+","+(this.x+75)+","+(this.y+45)+")"); // appliquer la rotation

// petit témoin
document.title = "angle:"+that.angle+" | x="+that.x+" | y="+that.y;
svg.appendChild(this.o); // afficher le tout
idobj++;



}


function keyCheck(e) {

if(that.angle==0) { that.angle = 360; }
if(that.angle==370) { that.angle = 10; }

if(e.keyCode == 37) { that.angle=that.angle-10; } // changer d'angle en fonction des touches flèches
if(e.keyCode == 39) { that.angle=that.angle+10; }
if(e.keyCode == 38) {
if(that.angle!=360&&that.angle!=0&&that.angle!=180)
{
if(that.angle<180)
{
that.x = that.x + 2;
if(that.angle<90&&that.angle!=0) { that.y = that.y - 2; }
if(that.angle>90&&that.angle!=360) { that.y = that.y + 2; }
}
else
{
that.x = that.x -2;
if(that.angle<270) { that.y = that.y + 2; }
if(that.angle>270) { that.y = that.y - 2; }
}
}
else
{
if(that.angle==360||that.angle==0) { that.y = that.y - 2; }
if(that.angle==180) { that.y = that.y + 2; }
}

that.o.setAttribute("x",that.x);
that.o.setAttribute("y",that.y);
}
//
that.o.setAttribute("transform","rotate("+that.angle+","+(that.x+75)+","+(that.y+45)+")");
document.title = "angle:"+that.angle+" | x="+that.x+" | y="+that.y;
}


var rd = new rondOBJ();

document.onkeydown = keyCheck;


</script>




</html>
1
Réponse 2 / 9
chimelpremier Messages postés 544 Date d'inscription vendredi 5 décembre 2003 Statut Membre Dernière intervention 20 mai 2005 1
31 oct. 2004 à 01:17
Dans un gif animé peut-être, mais bonjour le poids en ko
0
Réponse 3 / 9
cs_leris Messages postés 419 Date d'inscription dimanche 31 août 2003 Statut Membre Dernière intervention 19 avril 2010 3
31 oct. 2004 à 03:45
salut,

rotation 0,90,180,270 (soit 0,1,2,3)


compatible +de 80% des navigateurs :big)

L.
0
Réponse 4 / 9
chimelpremier Messages postés 544 Date d'inscription vendredi 5 décembre 2003 Statut Membre Dernière intervention 20 mai 2005 1
1 nov. 2004 à 00:33
ie = 80% => en diminution
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
maxxcbenny Messages postés 5 Date d'inscription vendredi 29 octobre 2004 Statut Membre Dernière intervention 31 décembre 2004
1 nov. 2004 à 10:33
Merci pour vos réponses mais en fait je cherche surtout à faire une rotation avec l'angle que je souhaite, par exemple une rotation de 14° horaire...

Est-ce que c'est possible en Javascript ou en HTML, sans avoir besoin de créer plusieurs images avec Photoshop ou sans avoir besoin de faire un Gif anim.

Merci d'avance
0
Réponse 6 / 9
cs_leris Messages postés 419 Date d'inscription dimanche 31 août 2003 Statut Membre Dernière intervention 19 avril 2010 3
1 nov. 2004 à 17:56
re,

je ne pense pas , du moins je ne l'ai jamais vu .

++

L.
0
Réponse 7 / 9
elganadi Messages postés 7 Date d'inscription samedi 1 mars 2003 Statut Membre Dernière intervention 1 juin 2010
24 nov. 2008 à 19:00
salut,
moi j'ai touver un exemple ou tu peu deplacer tes images et les redimensionner en scalable mais pour la rotation j'ignore et je suis très intéresser par la rotation de l'image quelqu'un pourra nous aider please!...
0
Réponse 8 / 9
cs_stephaneg Messages postés 15 Date d'inscription jeudi 11 décembre 2003 Statut Membre Dernière intervention 12 mai 2010 1
24 nov. 2008 à 20:18
Ne marche que sur IE

dudule
0
Réponse 9 / 9
cs_jperre Messages postés 268 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 19 janvier 2017 2
18 nov. 2011 à 22:33
Faire une rotation d'un élément (img,div,p, etc), c'est possible et facile avec CSS3. Consultez la page suivante :
http://www.w3schools.com/css3/css3_2dtransforms.asp.
Le problème, c'est que cela fonctionne uniquement avec les dernières versions des navigateurs.
Bon courage!...
0
Rejoignez-nous