Une page en JavaScript suffit pour introduire dans votre site web
une zone d'images dansantes, basée sur le mouvement aléatoire libre
(avec possibilité de superposition).
Toutes les images doivent avoir la même dimension [wIma,hIma],
et initialement, elles ne doivent pas dépasser la zone jaune
<div id='cnt' ...> </div>
dont la dimension est ajustable avec width:???px et height:???px .
La vitesse dépend des variables 'pas' et 'tim'.
En adaptant la fonction Clk(i), il est possible d'attribuer
au click sur une images une action individualisée:
l'exemple donné installe l'image cliquée au premier plan.
La fonction Ini() est un peu délicate:
elle écrit le code HTML des images dans la zone jaune.
Source / Exemple :
<!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="en">
<head>
<title>Images dansantes: mouvement aléatoire libre</title>
<script type="text/javascript">
//<![CDATA[
var iZon=0,nZon=0,tim=5; // timer en milisecondes
var pas=4,pas2=2*pas+1; // pas maximal du déplacement à chaque Nxt()
var wIma=200,hIma=150; // dimensions des photos en pixels
var xInf,yInf,xSup,ySup; // valeurs limites
var zon=[ // initialement, aucune image ne doit dépasser les bords
new Zon(000,000,"Image-0"), // x,y relatifs au conteneur
new Zon(000,225,"Image-1"),
new Zon(000,450,"Image-2"),
new Zon(300,225,"Image-3"),
new Zon(600,000,"Image-4"),
new Zon(600,225,"Image-5"),
new Zon(600,450,"Image-6")
];
var num=nZon-1; // numéro avec avec plus grand z-index
function Zon(x,y,nom) { // Définition de l'objet et comptage
this.x=x; this.y=y; this.nom=nom; nZon++;
}
function Ini() { // initialise
var s="",c=document.getElementById('cnt');
xInf=c.offsetLeft; xSup=xInf+c.clientWidth-wIma;
yInf=c.offsetTop; ySup=yInf+c.clientHeight-hIma;
for (var i=0;i<nZon;i++) { // Inscrit les zones dans le conteneur
var z=zon[i];
s+="<img id='i"+i+"' src='Img/"+z.nom+".jpg' title='"+z.nom
+"' onclick='Clk("+i+")' style='position:absolute; z-index:"
+i+"; left:"+(z.x+=xInf)+"px; top:"+(z.y+=yInf)+"px'/>";
}
c.innerHTML=s;
}
function Clk(i) { // Action du click le i-eme image
var ii=document.getElementById('i'+i);
document.getElementById('i'+num).style.zIndex=ii.style.zIndex;
ii.style.zIndex=nZon-1; num=i; // met ii au premier plan
alert(i+": "+zon[i].nom+" --> Remplacez Clk(i) par votre propre 'action'");
}
function Nxt() {
var im=document.getElementById('i'+iZon),z=zon[iZon];
var dx=Math.floor(Math.random()*pas2)-pas;
var dy=Math.floor(Math.random()*pas2)-pas;
var x=z.x+dx,y=z.y+dy;
if ((x>=xInf)&&(y>=yInf)&&(x<=xSup)&&(y<=ySup)) {
im.style.left=(z.x=x)+'px'; im.style.top=(z.y=y)+'px';
}
iZon=(iZon+1)%nZon;
}
//]]>
</script>
</head>
<body onload="Ini(); setInterval('Nxt()',tim);">
<h2>Images dansantes: mouvement aléatoire libre.</h2>
<div id='cnt' style="margin-left:10px; width:800px; height:600px; background:yellow">
<!-- conteneur des images dansantes. Adaptez-en la dimension width et height -->
</div>
<!-- le reste du code de body n'est pas indispensable -->
<p style='font-size:12px;'>
Cliquez sur une image: elle apparaît au premier plan et
vous êtes invités à écrire votre propre 'Clk(i)'.<br/>
Toutes les images ont la même dimension [wIma,hIma].<br/>
Initialement, les images ne doivent pas dépasser les bords du conteneur jaune.<br/>
La vitesse dépend des variables 'pas' et 'tim',
mais aussi du navigateur et de votre ordinateur.<br/>
</p>
<p style='font-size:12px; color:red;'>Testé avec les navigateurs:
'Internet Explorer 8 et 9', 'Firefox 4.0.1', 'Navigator 9.0.0.6',
'Google Chrome 11.0.696.71', 'Opera 11.11', 'Safari 5'.<br/>
(En execution locale, j'ai rencontré des difficultés de positionnement
avec Internet Explorer 8, sous Windows 7 - 64 bits)
</p>
<p style='font-size:12px; color:green;'>
Téléchargez le zip complet (avec sources et images):
<a href='http://www.william-voirol.ch/Prog/ImagesDansantes/AleatoireLibre.zip'>Aléatoire libre.zip</a><br/>
Essayez d'autes algorithmes d'images dansantes:
<a href='http://www.william-voirol.ch/Prog/ImagesDansantes/AleatoireOriente/index.html'>Aléatoire orienté</a>
<a href='http://www.william-voirol.ch/Prog/ImagesDansantes/AleatoireSansSuperpositions/index.html'>Aléatoire, sans superpositions</a>
<a href='http://www.william-voirol.ch/Prog/ImagesDansantes/Tortue/index.html'>Tortue</a><br/>
Les images de temples de l'Inde proviennent de mon site:
<a href='http://www.william-voirol.ch'>Splendeur de l'Inde</a>
</p>
</body>
</html>
Conclusion :
Le programme proposé est assez simple pour bien mettre en évidence les notions
utilisées, et il devrait fonctionner avec tous les navigateurs courants.
Faites directement un test:
(Lien original)
http://www.william-voirol.ch/prog/imagesdansantes/aleatoirelibre/index.html
(Lien TinyUrl)
http://tinyurl.com/ImagesDansantes
Le fichier zip contient le code source avec quelques images.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.