<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
<!-- Debut
// JavaScript pris sur le site: "http://www.java.scripts-fr.com"
// Ici on défini dans une variable le nombre de rotations
var nbr_rotation=3
// On écrit dans une autre variable un temps de rotation en secondes ici 2000 (2000=2 secondes)
var interval=3000
// La la grande question, met on un lien ou pas. Aller on va dire oui.
var linked=1 // Je met donc la variable liked à 1
/* ============================ Partie Images ============================ */
var rotations=new Array(nbr_rotation)
/*
Içi on déclare une nouvelle variable (rotations) qui est en fait un tableau qui contiendra "nbr_rotation" éléments. Bon la ca fait 3 quoi.
Pour créer un tableau en javascript, il suffit de lui donner un nom (ici rotations) et avec l'opérateur new on crée un objet array (tableau) à qui on donne n éléments. En simplifié ca donne : tableau = new array(3).
*/
for (i=0; i <nbr_rotation; i++)
rotations[i]=new Array()
/*
Puis on ouvre une boucle avec l'instruction for qui va nous créer autant de tableaux dans le tableau rotations que vous avez définis au début. J'ai l'impression de ne pas être très clair la... Comme je ne veux pas me faire bombarder de mails, je vais essayer de mieux m'expliquer.
La on se trouve dans la situation de tableaux multidimentionnels, des tableaux dans un tableau.
En essayant d'être clair, les 3 éléments de notre tableau contiennent chacun un tableau. Pourquoi allez vous me dire ? Tout simplement pour pouvoir autant de type de rotation que vous voulez.
Z'avez compris ? Ah je le savais que vous compreniez vite.
*/
// Maintenant on va remplir nos tableaux avec des chemins d'images.
rotations[0][0]='images/logitheque.gif'
rotations[0][1]='images/bouclier.gif'
rotations[0][2]='images/scripts-fr-ban.gif'
// Puis on défini les chemins pour la seconde rotation (les même mais inversées)
rotations[1][0]='images/ban_scripts-fr.gif'
rotations[1][1]='images/w3c_main.png'
rotations[1][2]='images/bienvenue.png'
// et enfin la 3ième rotation
rotations[2][0]='images/php_logo.gif'
rotations[2][1]='images/interface-logo.png'
rotations[2][2]='images/reb-logo.gif'
/*
Bien sur vous pouvez en mettre beaucoup plus. Que ce doit en nombre d'images par rotation ou en nombre de rotation, c'est vous qui voyez. Mais bon n'oubliez pas que c'est executé chez votre visiteur, alors ne soyez pas trop gourmand.
*/
/* ========================= Fin de la Partie Images ========================= */
/* ============================ Partie liens ============================ */
/*
Au cas ou vous avez choisis de ne pas mettre de lien sur vos images, cette partie ne vous servira pas, ca ne sert donc à rien de la prendre. Pour les autres qui seraient intéréssés, je vais l'expliquer.
*/
var rotalien=new Array(nbr_rotation)
for (i=0; i <nbr_rotation; i++)
rotalien[i]=new Array()
/*
Comme au dessus pour les images, on va créer un tableau multidimntionnel (ben oui il fut un lien à chaque image hein). Je ne reviens pas dessus c'est EXACTEMENT la même chose sauf que l'on change les noms.
*/
// On donne les liens correspondants à la première rotation.
rotalien[0][0]='http://www.logitheque.com/'
rotalien[0][1]='http://www.bouclier.org/'
rotalien[0][2]='http://www.java.scripts-fr.com/'
// On donne les liens correspondants à la seconde rotation.
rotalien[1][0]='http://www.cgi.scripts-fr.com/'
rotalien[1][1]='http://www.w3.org/'
rotalien[1][2]='http://www.usenet-fr.net/'
// et on termine pour la troisième rotation.
rotalien[2][0]='http://www.php.net/'
rotalien[2][1]='http://www.mysql.com/'
rotalien[2][2]='http://www.rebol.com/'
function clickredir(){
window.location=rotalien[maininc][subinc]
}
/*
Ici une fonction qui nous permet de changer l'url du navigateur avec la propriété location de l'objet window.
En clair on écrit la nouvelle adresse dans le navigateur et celui ci s'y rend.
Ne vous inquiètez pas pour le moment de maininc et de subinc, j'y reviens plus bas.
*/
/* ========================= Fin de la Partie liens ========================= */
var maininc=0
var subinc=0
// Avant tout on met nos variables maininc et subinc à 0 (patience, j'y viens)
if (linked) // Si on a voulus des liens
{
document.write('<a href="javascript:clickredir()">
<img src="'+rotations[0][0]+'" name="multislide" border=0></a>')
// On écrit le code HTML du lien et de l'image avec la méthode write de l'objet document. (notez le name)
}
else // sinon,
{
document.write('<img src="'+rotations[0][0]+'" name="multislide">')
// On écrit juste le code HTML de l'image. (Z'avez vu le name ?)
}
// Bon c'est la que ca deviens sioux. C'est la fonction de rotation des images
function slideit()
{
subinc= (subinc<rotations[maininc].length-1)? subinc+1: 0
document.images.multislide.src=rotations[maininc][subinc]
}
/*
Et voila c'est clair non ? Pas besoin d'expliquer... Nan, je vous charie, c'est hyper ardu à comprendre ce truc.
Bon comment je vais pouvoir expliquer ca moi... Déjà que je comprend pas tout...
Pour bien comprendre il faut découper et encore...
La on se retrouve avec un condition trinaire (un bête if...then...else... quoi).
Donc en fait on se demande si subinc est inférieur à rotations[maininc].length-1 (nombre d'éléments contenus dans le tableau), si oui on ajoute 1 à subinc, sinon on retourne 0. C'est pas clair hein ? Ouais je sais... si vous avez mieux comme explication je suis preneur.
Puis on va mettre comme image (souvenez vous du nom de notre balise) celle contenue dans le tableau rotations[maininc][subinc] avec la propriété images de l'objet document. Pas très clair non plus...
Bon faites moi confiance ca marche :-)
*/
function setslide(which)
{
clearInterval(runit)
// Avec la méthode clearInterval de l'objet window on annule le délai.
maininc=which
subinc=0
runit=setInterval("slideit()",interval)
/*
puis on le remet avec la méthode setInterval de l'objet window qui permet de faire appel à la fonction slideit() et la relancer toutes les "interval" (voir tout en haut)
*/
}
runit=setInterval("slideit()",interval)
// La on démarre juste le script.
// fin du script -->
</script>
- Première rotation : <a href="javascript:setslide(0)">Logitheque | Bouclier | Java.Scripts-Fr</a>
- Seconde rotation : <a href="javascript:setslide(1)">Cgi.Scripts-Fr | W3C | Usenet-fr</a>
- Troisième rotation : <a href="javascript:setslide(2)">PHP | MySQL | Rebol</a>
</body>
</html>
| 
