Créez votre site avec honolulu...
Apprendre le html
Cours de javascript
Apprendre les CSS

Les images en Javascript  






Le tableau que vous avez vu dans la page précedente recourt à la notion d'Array mais aussi à celle de "boucle".
La syntaxe habituelle d'une boucle ressemble à :

for (i=0;i<4;i++)
{instructions}

Traduction littérale : on exécute les instructions entre accolades pour
i démarre à "0",
i inférieur à "4",
i=i+1

Illustration :

<script>
var mois=new Array("janvier","fevrier","mars","avril","mai","juin","juillet","aout","septembre",
"octobre","novembre","decembre")
document.write("<table bgcolor='white'>")
for (i=0;i<12;i++)
{
document.write("<tr><td bgcolor='#8f8fbd'><font face='verdana' color='white'><center>")
document.write(mois[i])
}
document.write("</center></font></td></tr></table>")
</script>

  • on crée une <table>
  • Chacun des éléments de l'array est adressé par mois[i]
  • dans mois[i] i représente l'indice de chacun des éléments de l'array
  • on déclare la valeur de i à 0, puis tant que i est inférieur à 12 (le nombre d'éléments de notre array atteignant 11) on incrémente de 1 la valeur de i.

--> i démarre à 0, ce qui veut dire que i=mois[0] donc i correspond à l'élément "0" (Janvier) de notre array
--> comme i=0, i est inférieur à 12
--> et pour i<12, i=i++, (i=i+1) on incrémente de 1 la valeur de i, donc i=1
et on peut continuer (en boucle) :
--> i est maintenant égal à 1 donc (Février) de notre array etc, etc.
Pour chaque "incrémentation" (i=i+1) jusqu'au butoir i<12, on crée un <td> et pour finir on ferme la <table>

Illustration : voici un exemple en images (c'est le cas de le dire) de ce que l'on peut faire avec une boucle "for(i=x;i<x;i++)" associée à un array...

Voici 4 images fixes (je me permets au passage de dire que j'en suis l'auteur et que plein d'autres vous attendent sur Honolulu) :


    

    

Pour ce genre d'effet, vous trouverez une multitude de scripts tous différents. Chacun écrit son script selon sa connaissance et sa "perception" de Javascript. C'est ce que j'ai fait.

Voici mon script (qui est perfectible mais qui est simple, ou le contraire) :

<script>
for (i=0;i<3;i++)
{
var lieu=new Array("thedice.gif","golf.gif","pausecafe.gif","doublefete.gif")
}
function aff()
{
if (i>2){i=0}
else {i++}
document.getElementById("images").src=lieu[i];
setTimeout('aff()',1000);
}
</script>

Si vous avez des questions, des remarques, passez par le forum !