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>
<body>
<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>
</body>
</html>