Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

JavaScript 1.3
Images

  Diaporama

fonction de ce script  principe de ce script  le script lui-meme  demonstration du script  telechargement du script

  Fonction
Le but de ce script est de proposer au visiteur un diaporama qu'il fera lui-même défiler.
  Principe
On crée deux variables, une pour un compteur, démarrant à 0, une pour le nombre total d'images disponibles.
Une liste de nouvelles variables proposant les légendes des images (une par image) et deux fonctions sont également nécessaires :
  • la fonction 'image suivante', pour passer à l'image suivante,
  • et la fonction 'image précédente', pour passer à l'image précédente.
On ajoute également ici une fonction de remise à zéro.
  Le script
dans la partie <head>
<script language="JavaScript">
// on initialise le compteur d'images
var compteur = 0;

// le nombre total d'images
var total_img = 10;

// on crée la liste des messages relatifs aux images
message = new Array(total_img)
message[1] = "Premiere image";
message[2] = "Seconde image";
message[3] = "Troisieme image";
message[4] = "Quatrieme image";
message[5] = "Cinquieme image";
message[6] = "Sixieme image";
message[7] = "Septieme image";
message[8] = "Huitieme image";
message[9] = "Neuvieme image";
message[10] = "Dixieme image";


// La fonction pour faire monter le compteur
function monter() {
compteur += 1;
if ( compteur == (total_img + 1) ) {
compteur = 1;
}
document.vignette.src = "images/" + compteur + ".gif";
document.formulaire.legende.value = message[compteur];
}

// La fonction pour faire descendre le compteur
function descendre() {
compteur += -1;
if ( compteur == 0 ) {
compteur = total_img;
}
document.vignette.src = "images/" + compteur + ".gif";
document.formulaire.legende.value = message[compteur];
}

// La fonction de remise à zéro
function zero() {
document.vignette.src = "images/0.gif";
document.formulaire.legende.value = "";
}
</script>

dans la partie <body>
<form name="formulaire">
<input type="button" value="Image precedente" OnClick="descendre();">
<a href="javascript:zero();"><image src="images/0.gif" name="vignette" border="0"></a>
<input type="button" value="Image suivante" OnClick="monter();">

<input type="text" name="legende" size="30" value="">
</form>
  Démonstration


  Téléchargement
Ce script est disponible en deux versions :
  • le script est intégré à la page où il agit,
  • le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

    L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
    Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.
    		•
    Script intégré :
    img_diapo.zip
    12 Ko    		 telechargez le script telechargez le script
    Script séparé :
    img_diapo2.zip
    12 Ko
    Recherche
    		aide sur la recherche
    CSS 2
    DHTML
    HTML 4
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter