Des notes destinées à éclaircir certains points
ou à apporter d'intéressants suppléments d'information
sont programmées pour apparaître lorsqu'on passe le curseur de souris
sur des icônes telles que
          
Pour des raisons de sécurité, certains navigateurs
bloquent l'apparition de ces notes (programmées en JavaScript) .
Des précieuses informations, exercices, réponses, aidant à comprendre,
à se repérer, à étendre ses connaisances sont alors perdues.

AUTORISEZ DONC VOTRE NAVIGATEUR A OUVRIR CES SCRIPTS !

Essai animation pas à pas

Accueil
du Site

 
  Avant    Après  

Conduction type métallique par électrons libres.
PasAV :   PasArr :   Au début : A la fin : Continu : Arrêt :



N° d'image en vue, ou avertissement :

Les deux commandes (en cliquant des images en haut - par un formulaire en bas)
concernent bien le même défilement des mêmes images.
Mais ils sont indépendants. Par ex. la fenêtre d'affichage n'est pas actionnée par les images.

En haut, les commandes agissent sur un objet
"Images_pasApas" qui est étudié dans cette même page plus bas.
En bas, le formulaire utilise des procédures écrites dans le script incorporé dans cette page HTML.


Création d'un objet d'animation

<script language="JavaScript">

//===========================================================
//SCRIPT POUR DEFILÉ MANUEL D'IMAGES CRÉÉ SOUS FORME D'OBJET.
//===========================================================
//CONSTRUCTEUR

function Images_pasApas(RepImages, nbImages, nomGenerique, extension) {
  this.RepImgs=RepImages;     //Propriétés de l'objet
  this.nbImgs=nbImages;
  this.nomGener=nomGenerique;
  this.extImgs=extension;
  this.num_Img_ON=0;
  this.image = new Array(nbImages);

  for(var i = 0; i<nbImages; i++){    //Création des objets Image
    this.image[i] = new Image();
    if(i<10) this.image[i].src = RepImages+nomGenerique+"0"+i+extension;
    else this.image[i].src = RepImages+nomGenerique+i+extension;
  }

this.PasAv = function (){
  if(this.num_Img_ON==(nbImages-1)) {
  document.images["Img_Cible"].src = this.image[0].src;
  this.num_Img_ON=0;
  //Aff(num_Img_ON);
  }
  else {
  document.images["Img_Cible"].src = this.image[++this.num_Img_ON].src;
  //Aff(num_Img_ON);
  }
}

this.PasAr = function(){
  if(!this.num_Img_ON) {
    alert("NON ! Avancez plutôt.");
    return;
  }
  document.images["Img_Cible"].src = this.image[--this.num_Img_ON].src;
  //Aff(this.num_Img_ON);
}


this.AuDebut =function() {
  this.num_Img_ON=0;
  document.images["Img_Cible"].src = this.image[this.num_Img_ON].src;
  //Aff(this.num_Img_ON);
  }


  this.AlaFin= function(){
  this.num_Img_ON=nbImages-1;
  document.images["Img_Cible"].src = this.image[this.num_Img_ON].src;
  //Aff(this.num_Img_ON);
  }
}

</script>

Paramètres à passer au constructeur

  1. Le répertoire sous lequel se trouvent toutes les images.
    Ex : "../../MesImages/"

  2. Le nombre d'images

  3. Le nom générique de toutes les images :
    Ex : "cond_trous_"
    pour cond_trous_00.gif, cond_trous_01.gif...cond_trous_14.gif

  4. L'extension des fichiers d'image.
    Ex : ".gif"
Exemple de codage dans un script incorporé

<script language="JavaScript">

//Déclaration-création de l'instance d'objet par le constructeur
//Pour faire simple, j'ai donné le nom OIPAP à l'instance d'ojet créée.
var OIPAP =
new Images_pasApas('../../../physique/electronique/semiconducteurs/images/NONPUBLIE/conduction/Trous/', 14, 'cond_trous_', '.gif');

</script>

Utilisation de l'instance d'objet créée

Voici, pour l'exemple, le code pour déclencher la fonction PasAvant()
en cliquant sur l'image de nom "Av" :
<a onClick ="OIPAP.PasAvant()"><img name="Av" ... ></a>

Méthodes de l'objet "Images_pasApas"

PasAv() Affiche l'image suivante
PasAr() Affiche l'image précédente
AuDebut() Affiche la première image
AlaFin() Affiche la dernière image

Propriétés de l'objet "Images_pasApas"

RepImgs Répertoire des images
nbImgs Nombre d'images
nomGener Nom générique des images
extImgs Extension des fichiers image
num_Img_ON Numéro de l'image actuelle (commence par zéro)
image Pointeur sur le tableau des images : Ex. image[5]

Orientation

Le langage "JavaScipt" Cours pour débutants et Cours structuré. Sommaire :
Application : Résolution d'une équation par encadrements successifs (orienté exploitation)
Application : Résolution d'une équation par encadrements successifs (programmation)
Application : Animation d'images
Application : Grapheur cartésien
Application : Grapheur paramétrique
Un site très intéressant pour les "matheux-informaticiens"
Accès à la page d'accueil générale du site :