Statistiques| Inscription| Espace privé
Développement Web
Accueil > Dom > une animation
Le plan Les galeries
Dernière mise à jour :
vendredi 15 mai 2009
Contact
Webmestre
olivier ramos
ParamSPIP
Agenda
<<   Juillet 2019   >>
Lu Ma Me Je Ve Sa Di
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 1 2 3 4



Une animation interactive...
On utilise ici la modification du style de positionnement (coordonnées left top), ainsi la fonction setInterval() pour mettre en mouvements des images.
 
 
 
 
Une animation interactive...
On utilise ici la modification du style de positionnement (coordonnées left top), ainsi la fonction setInterval() pour mettre en mouvements des images.
 
 
 
 
Pour voir le lecteur en plein écran, cliquez sur l’un des deux liens.
 
lire la suite de l'article
 
 
 
 
Le code html
 
 
 
 

Le code html du corps de la page est composé :

- d’un premier bloc qui contient trois tableaux (un pour les déplacements, un pour la taille et enfin un pour la vitesse) ,
- d’un second qui sera l’emplacement dans lequel l’image pourra se mouvoir.

Les identifiants des balises serviront :
- d’une part pour le style,
- d’autre part pour identifier et manipuler avec javascript, les objets correspondants.

Un des intérêts de cet exemple, est de montrer que l’ on peut très simplement modifier la position et la taille d’un élément.

<body >

<div
id="conteneur0">

<table
id="tableaucontrole" >
 <tr>
  <td>
   <div
id="un"></div>
  </td>
  <td>
   <div
id="trois"></div>
  </td>
 </tr>
 <tr>
  <td>
   <div
id="quatre" ></div>
  </td>
  <td>
   <div
id="six"></div>
  </td>
 </tr>
 <tr>
  <td>
   <div
id="sept"></div>
  </td>
  <td>
   <div
id="neuf" ></div>
  </td>
 </tr>
</table>


<table
id="tableautaille">
 <tr>
  <td>
  <div
id="deux"></div>
  </td>
 </tr>
 <tr>
  <td>
  <div
id="huit" ></div>
  </td>
 </tr>
</table>

<table
id="tableauvitesse">
 <tr>
  <td>
   <div
id="tdvitesse1"></div>
  </td>
  <td>
   <div
id="tdvitesse2" ></div>
  </td>
  <td>
   <div
id="tdvitesse3"></div>
  </td>
  <td>
   <div
id="tdvitesse4" ></div>
  </td>
 </tr>

</table>
</div>

<div
id="conteneur">
 <img
id="image" src="aristo0.jpg" style="top:125px ; left:125px ; width:100px ; height:100px ; position:relative ;" alt=""/>
</div>

</body>

 
 
 
 
 
Le style
 
 
 
 

En ce qui concerne le style, on notera deux nouveautés :

- l'utilisation d'image de fond grâce à la règle background:url(image.extensionf),

- l'utilisation (abusive) du pseudo-format :hover qui permet de modifier le style de l'élément lorsque l'on passe la souris dessus (c'est plus simple qu'avec du code javascript et la propriété ommouseover).


body{
 background:#2d3044;
}
#image{

 position:relative;
}
#conteneur{

 clear:both;
 height:350px;
 width:350px;
 top:0px;
 margin:20px auto;
 position:relative; 
 border:15px inset #1c2351;
 background:white;
}
#conteneur0{

 margin:20px auto;
 width:400px;
}
#tableaucontrole{

 float:left;
 margin-left:55px;
 margin-bottom:20px;
 background:#353958;
 border:5px outset #1c2351;
}
#tableaucontrole:hover{

 background:#565b82;
}
#tableautaille{

 float:left;
 margin-left:30px;
 margin-top:40px;
 background:#353958;
 border:5px outset #1c2351;
}
#tableautaille:hover{
 background:#565b82;
}
#tableauvitesse{

 float:left;
 margin-left:30px;
 margin-top:50px;
 background:#353958;
 border:5px outset #1c2351;
}
#tableauvitesse:hover{

 background:#565b82;
}
#tdvitesse1 {

 border: 0px solid gold;
 width: 10px;
 height: 50px;
 margin: 0px auto;
 background:url(n1.gif) no-repeat bottom;

}
#tdvitesse1:hover {
 background:url(n1c.gif) no-repeat bottom;
}
#tdvitesse2 {
 border: 0px solid gold;
 width: 10px;
 height: 50px;
 margin: 0px auto;
 background:url(n2.gif) no-repeat bottom;

}
#tdvitesse2:hover {

 background:url(n2c.gif) no-repeat bottom;
}
#tdvitesse3 {
 border: 0px solid gold;
 width: 10px;
 height: 50px;
 margin: 0px auto;
 background:url(n3.gif) no-repeat bottom;
}
#tdvitesse3:hover {

 background:url(n3c.gif) no-repeat bottom;
}
#tdvitesse4 {
 border: 0px solid gold;
 width: 10px;
 height: 50px;
 margin: 0px auto;
 background:url(n4.gif) no-repeat bottom;}
#tdvitesse4:hover {

 background:url(n4c.gif) no-repeat bottom;
}
#un {

 border: 0px solid gold;
 width: 30px;
 height: 30px;
 margin: 0px auto;
 background:url(flecheblf1.gif);
}
#un:hover {

 background:url(flecheblc1.gif);
}
#deux {

 border: 0px solid gold;
 width: 30px;
 height: 30px;
 margin: 0px auto;
 background:url(flecheblf2.gif);

}
#deux:hover {

 background:url(flecheblc2.gif);
}
#trois {

 border: 0px solid gold;
 width: 30px;
 height: 30px;
 margin: 0px auto;
 background:url(flecheblf3.gif);
}
#trois:hover {

 background:url(flecheblc3.gif);
}
#quatre {

 border: 0px solid gold;
 width: 30px;
 height: 30px;
 margin: 0px auto;
 background:url(flecheblf4.gif);
}
#quatre:hover {

 background:url(flecheblc4.gif);
}
#cinq {

 border: 0px solid gold;
 width: 50px;
 height: 50px;
 margin: 0px auto;
 background:url(tete2.gif);
}
#cinq:hover {

 background:url(tete3.gif);
}
#six {
 border: 0px solid gold;
 width: 30px;
 height: 30px;
 margin: 0px auto;
 background:url(flecheblf6.gif);
}
#six:hover {
 background:url(flecheblc6.gif);
}
#sept {
 border: 0px solid gold;
 width: 30px;
 height: 30px;
 margin: 0px auto;
 background:url(flecheblf7.gif);
}
#sept:hover {
 background:url(flecheblc7.gif);
}
#huit {

 border: 0px solid gold;
 width: 30px;
 height: 30px;
 margin: 0px auto;
 background:url(flecheblf8.gif);
}
#huit:hover {
 background:url(flecheblc8.gif);
}
#neuf {

 border: 0px solid gold;
 width: 30px;
 height: 30px;
 margin: 0px auto; 
 background:url(flecheblf9.gif);
}
#neuf:hover {

 background:url(flecheblc9.gif);
}

 
 
 
 
 
Le code javascript
 
 
 
 
//************************************************************************************************************************
//                                                                    Les variables globales
//************************************************************************************************************************

// On stocke les 6 images dans un tableau
var cour= new Array(6);
cour[0]="aristo0.jpg";
cour[1]="aristo1.jpg";
cour[2]="aristo2.jpg";
cour[3]="aristo3.jpg";
cour[4]="aristo4.jpg";
cour[5]="aristo5.jpg";

//Déclaration des noms des processus permettant les appels récurrents simulant le mouvement.

var debutcoursehautgauche=null;
var debutcoursebasgauche=null;
var debutcoursegauche=null;
var debutcoursehautdroite=null;
var debutcoursebasdroite=null;
var debutcoursedroite=null;
var debutgrandir=null;
var debutretrecir=null;

// tempo est la variable correspondant à la vitesse.

var tempo=300;

// L'image est un carré de coté de longueur 100px, sa position intiale est donnée par left:200px et top:200px.
// On stocke dans des variables globales  les variables de positionnement et de taille, ainsi que le numéro de l'image.

var gauche=125;
var haut=125;
var numero=0;
var taille=100;

//************************************************************************************************************************
//                                                                               Le gestionnaire d'événements
//************************************************************************************************************************

// Au chargement de la page.
window.onload=initialisation;

function
initialisation() {

// Attention, surtout ne pas mettre de parenthèses (égalité fonctionnelle).
 document.getElementById("un").onmouseover=hautgauche;
 document.getElementById("un").onmouseout=stop;
 
 document.getElementById("trois").onmouseover=hautdroite;
 document.getElementById("trois").onmouseout=stop;
 
 document.getElementById("quatre").onmouseover=agauche;
 document.getElementById("quatre").onmouseout=stop;
 
 document.getElementById("six").onmouseover=adroite;
 document.getElementById("six").onmouseout=stop;
 
 document.getElementById("sept").onmouseover=basgauche;
 document.getElementById("sept").onmouseout=stop;
 
 document.getElementById("neuf").onmouseover=basdroite;
 document.getElementById("neuf").onmouseout=stop;
 
 document.getElementById("deux").onmouseover=plus;
 document.getElementById("deux").onmouseout=stopzoom;
 
 document.getElementById("huit").onmouseover=moins;
 document.getElementById("huit").onmouseout=stopzoom;
 
 document.getElementById("tdvitesse1").onmouseover=function () { tempo=300; }
 document.getElementById("tdvitesse2").onmouseover=function () { tempo=200; }
 document.getElementById("tdvitesse3").onmouseover=function () { tempo=100; }
 document.getElementById("tdvitesse4").onmouseover=function () {tempo=50;}
}
 
//********************************************************************************************************************
// Les 6 fonctions permettant de se déplacer.
//
********************************************************************************************************************

function
coursegauche(){
// La variable locale permet de voir si le déplacement est possible.
var ngauche=gauche-5;
// Si c'est ok, on bouge...

if (ngauche>=0){
numero++;
document.getElementById("image").src=cour[numero%6];
gauche=gauche-5;
document.getElementById("image").style.left=gauche+"px";
}
else clearInterval(debutcoursegauche);
}

function
coursehautgauche(){
// Les variables locales permettent de voir si le déplacement est possible.
var ngauche=gauche-5;
var nhaut=haut-5;
// Si c'est ok, on bouge...
if ((ngauche>=0)&&(nhaut>=0)){
numero++;
document.getElementById("image").src=cour[numero%6];
gauche=gauche-5;
haut=haut-5;
document.getElementById("image").style.left=gauche+"px";
document.getElementById("image").style.top=haut+"px";
}
else clearInterval(debutcoursehautgauche);
}

function coursebasgauche(){
// Les variables locales permettent de voir si le déplacement est possible.
var ngauche=gauche-5;
var nbas=350-(haut+taille)-5;
// Si c'est ok, on bouge...
if ((nbas>=0)&&(ngauche>=0)){
numero++;
document.getElementById("image").src=cour[numero%6];
gauche=gauche-5;
haut=haut+5;
document.getElementById("image").style.left=gauche+"px";
document.getElementById("image").style.top=haut+"px";
}
else clearInterval(debutcoursebasgauche);
}

function coursedroite(){
// La variable locale permet de voir si le déplacement est possible.
var ndroite=350-(gauche+taille)-5;
// Si c'est ok, on bouge...
if (ndroite>=0){
numero++;
document.getElementById("image").src=cour[numero%6];
gauche=gauche+5;
document.getElementById("image").style.left=gauche+"px";
}
else clearInterval(debutcoursedroite);
}

function coursehautdroite(){
// Les variables locales permettent de voir si le déplacement est possible.
var ndroite=350-(gauche+taille)-5;
var nhaut=haut-5;
// Si c'est ok, on bouge...
if ((ndroite>=0)&&(nhaut>=0)){
numero++;
document.getElementById("image").src=cour[numero%6];
gauche=gauche+5;
haut=haut-5;
document.getElementById("image").style.left=gauche+"px";
document.getElementById("image").style.top=haut+"px";
}
else clearInterval(debutcoursehautdroite);
}

function coursebasdroite(){

// Les variables locales permettent de voir si le déplacement est possible.

var nbas=bas=350-(haut+taille)-5;
var ndroite=350-(gauche+taille)-5;
// Si c'est ok, on bouge...
if ((nbas>=0)&&(ndroite>=0)){
numero++;
document.getElementById("image").src=cour[numero%6];
gauche=gauche+5;
haut=haut+5;
document.getElementById("image").style.left=gauche+"px";
document.getElementById("image").style.top=haut+"px";
}
else clearInterval(debutcoursebasdroite);
}

//*****************************************************************************
//  Les fonctions d'agrandissement et de réduction.
// *****************************************************************************

function grandir(){
// On utilise des variables locales pour voir si l'agrandissement est possible.
var ntaille=taille+2;
var nhaut=haut-1;
var ngauche=gauche-1;
var nbas=350-(nhaut+ntaille);
var ndroite=350-(ngauche+ntaille);
// Si c'est ok, on agrandit...
if((nbas>=0)&&(nhaut>=0)&&(ngauche>=0)&&(ndroite>=0)){
taille=ntaille;
haut=nhaut;
gauche=ngauche;
document.getElementById("image").style.height=ntaille+"px";
document.getElementById("image").style.width=ntaille+"px";
document.getElementById("image").style.top=nhaut+"px";
document.getElementById("image").style.left=ngauche+"px";
}
}

function retrecir(){
// On utilise des variables locales pour voir si le rétrécissement est possible.
var ntaille=taille-2;
// Si c'est ok, on rétrécit...
if(ntaille>=1){
taille=ntaille;
haut=haut+1;
gauche=gauche+1;
document.getElementById("image").style.height=taille+"px";
document.getElementById("image").style.width=taille+"px";
document.getElementById("image").style.top=haut+"px";
document.getElementById("image").style.left=gauche+"px";
}
}

//**************************************************************************************************************
// Les fonctions permettant de démarrer les processus d'appels répétitifs.
// La fonction setInterval('fonc()',tempo) appelle la fonction fonc()  toutes les "tempo" millisecondes. 
// La fonction clearInterval détruit le processus précédent.
//**************************************************************************************************************

function
agauche(){
debutcoursegauche=setInterval('coursegauche()',tempo);
}
function adroite(){
debutcoursedroite=setInterval('coursedroite()',tempo);
}
function hautgauche(){
debutcoursehautgauche=setInterval('coursehautgauche()',tempo);
}
function hautdroite(){
debutcoursehautdroite=setInterval('coursehautdroite()',tempo);
}
function basgauche(){
debutcoursebasgauche=setInterval('coursebasgauche()',tempo);
}
function basdroite(){
debutcoursebasdroite=setInterval('coursebasdroite()',tempo);
}
function plus(){
debutgrandir=setInterval('grandir()',50);
}
function moins(){
debutretrecir=setInterval('retrecir()',50);
}
function stop(){
if (debutcoursehautgauche!=null) clearInterval(debutcoursehautgauche);
if (debutcoursebasgauche!=null)clearInterval(debutcoursebasgauche);
if (debutcoursegauche!=null) clearInterval(debutcoursegauche);
if (debutcoursehautdroite!=null) clearInterval(debutcoursehautdroite);
if (debutcoursebasdroite!=null) clearInterval(debutcoursebasdroite);
if (debutcoursedroite!=null) clearInterval(debutcoursedroite);
}
function stopzoom(){
if (debutgrandir!=null) clearInterval(debutgrandir);
if (debutretrecir!=null) clearInterval(debutretrecir);
}
function stopvitesse(){
if (debutrapide!=null) clearInterval(debutrapide);
if (debutlent!=null) clearInterval(debutlent);
}