En javascript, il existe plusieurs méthodes afin d’accéder aux images d’une page et ainsi de les manipuler. Cela peut se faire en utilisant l’objet javascript images ou le modèle DOM.
Cette manipulation des images peut permettre, entre autre, de créer des rollover, des diaporamas, des préchargements d’images, etc.


L’objet images

L’objet images représente un tableau de toutes les images présentent dans la page. L’accès à l’une d’entre elles peut se faire de différentes façons :

CODE

document.images[x]

Où x représente le numéro de l’image dans la page. La première image déclarée dans la page ayant le numéro 0.

CODE

document.images["nom_d_l_image"]

Le nom de l’image correspond à la valeur donnée à l’attribut name de la balise <img>

CODE

document.nom_de_l_image

Le nom de l’image correspond à la valeur donnée à l’attribut name de la balise <img>
Avec cette méthode, le nom de l’image ne peut pas être défini par une variable, il est nécessaire de donner directement le nom exact de l’image, c’est pour cela que la solution précédente sera utilisée dans les exemples de fonctions qui suivront.


Les propriétés de l’objet images :





Le modèle DOM

Le modèle DOM permet d’accéder à n’importe quel élément d’une page grâce à son identifiant (attribut id des balises). Il est donc nécessaire de spécifier cet attribut pour tous les éléments à manipuler avec cette méthode et de ne jamais donner de valeurs identiques aux identifiants présents dans une même page.

Accéder à un élément avec le modèle DOM :

CODE

document.all["identifiant"]

Pour Internet Explorer inférieur à 5

CODE

document.getElementById("identifiant")

Pour Netscape, Mozilla, IE5 et supérieur

Afin de pouvoir utiliser le modèle DOM sur les différents navigateurs et en fonction de leur syntaxe propre, on utilisera :

CODE

if(document.getElementById) { document.getElementById("identifiant") } else if(document.all) { document.all["identifiant"] }

Les propriétés accessibles avec le modèle DOM :

Les propriétés regroupent celles usuelles de tous les éléments du modèle DOM ainsi que celles propres à la balise <img>.

Propriétés génériques :



Propriétés de la balise <img> :





La fonction Image()

La fonction Image() permet de générer un nouvel élément graphique.
Elle s’utilise sous la forme :

CODE

nom_de_l_image = new Image();

Cette fonction peut avoir 2 paramètres facultatifs, correspondant pour le premier à la largeur de l’image et pour le second à la hauteur de l’élément graphique généré.
Une fois l’image créée, on peut en définir la source et ainsi accéder aux caractéristiques de ce fichier image, en obtenir les dimensions.
L’objet Image est notamment utilisé afin de précharger des images dans une page, les fichiers images sont ainsi créés et non affichés. Il est également utile pour obtenir les dimensions d’une image non présente actuellement dans la page, afin de créer des rollover sur deux images ayant des dimensions différentes par exemple (voir les exemples d’application et les fonctions données dans la seconde partie du tutorial).



img:coupeApplication - fonctions exemples
img:coupe

Les fonctions détaillées ci-dessous utilisent l'objet Images pour accéder aux images du document. Le principe reste identique avec l'utilisation du modèle DOM et vous trouverez en fin du tutorial un lien vers deux pages d'exemples reprenant les fonctions avec les deux types d'accès aux images.


Rollover classique

CODE

function rollover(img,newSrc){ document.images[img].src=newSrc; }

Modifier la source d’un élément graphique présent dans le document.

• Paramètres :
  - nom de l’image
  - chemin vers la nouvelle image
  
• Explication :
  Avec la propriété src, on modifie la source de l’élément, cependant les dimensions de l’élément restent celles de l’image présente à l’origine.
  
  
  
  Rollover avec dimensions variables
  
  

  CODE

  function rollover2(img,newSrc){ newImg= new Image(); newImg.src=newSrc; document.images[img].src=newImg.src; document.images[img].width=newImg.width; document.images[img].height=newImg.height; }

  
  
  
  
  Créer un nouvel élément graphique et en donner la source et les dimensions à une image présente dans la page.
  
  • Paramètres :
    - nom de l’image
    - chemin vers la nouvelle image
    
  • Explication :
    newImg= new Image() ; on crée un nouvel élément graphique avec Image()
    newImg.src=newSrc; on attribue une source à cet élément
    document.images[img].src=newImg.src;
    document.images[img].width=newImg.width;
    document.images[img].height=newImg.height;
    on peut ensuite accéder aux dimensions de ce fichier que l’on va ensuite attribuer, ainsi que la nouvelle source, à l’élément ciblé de la page.
    
    
    
    Image aléatoire au chargement
    
    

    CODE

    function aleat(){ aleatsrc=aleat.arguments[Math.floor(Math.random() * aleat.arguments.length)]; document.write("<img src=\""+aleatsrc+"\">"); }

    
    
    
    
    Calculer un nombre aléatoire en fonction du nombre d’images possibles afin de définir la source de l’image. La fonction est à lancer dans le body là où devra s’insérer l’image puisque génère également le code html de l’image.
    
    • Paramètres :
      Chemins vers les images à afficher
      
    • Explication :
      aleat.arguments[x] permet d’accéder au paramètre x passé à la fonction
      aleat.arguments.length retourne le nombre de paramètres passés
      Math.random() retourne un nombre aléatoire compris entre 0 et 1
      Math.floor(x) retourne un entier arrondi à l’inférieur de x
      Math.floor(Math.random() * aleat.arguments.length) retourne donc un entier aléatoire compris entre 0 et le nombre maximum d’images possibles, tous deux compris
      aleat.arguments[Math.floor(Math.random() * aleat.arguments.length)] correspond à un des arguments passé à la fonction aleat() et choisit de façon aléatoire
      document.write("<img src=\""+aleatsrc+"\">");
      
      
      Préchargement d’images
      
      

      CODE

      function preload(){ imgload=new Array(); for(var j=0; j<preload.arguments.length; j++){  imgload[j]=new Image();  imgload[j].src=preload.arguments[j]; } }

      
      
      
      
      Créer un nouvel élément graphique, en lui spécifiant la source, par image à charger.
      
      • Paramètres :
        Chemins vers les images à charger
        
      • Explication :
        imgload=new Array(); on crée un tableau qui permettra de stocker les noms et chemins des éléments graphiques
        preload.arguments.length retourne le nombre de paramètres passés
        for(var j=0; j<preload.arguments.length; j++) la boucle permet de traiter tous les paramètres passés à la fonction
        imgload[j]=new Image(); on crée un nouvel élément graphique
        imgload[j].src=preload.arguments[j];
        
        
        Diaporama automatique
        
        

        CODE

        imgdiapo=new Array("img/modo01.gif", "img/modo02.gif", "img/modo03.gif", "img/modo04.gif", "img/modo05.gif", "img/modo06.jpg", "img/modo07.gif", "img/modo08.png"); timing=1000; nomimg="diapo"; i=0; function diapoauto(){ if(i<imgdiapo.length){  document.images[nomimg].src=imgdiapo[i];  setTimeout("diapoauto()",timing);  i++;  if(i==imgdiapo.length){   i=0;  } } }

        
        
        
        
        Définir toutes les sources possibles puis modifier la source d’une image toutes les x millisecondes.
        
        • Variables :
          imgdiapo est un tableau contenant les chemins vers les images à afficher
          timing est le temps défini en millisecondes entre chaque changement d’image
          nom correspond au nom donné à l’image
          
        • Explication :
          if(i<imgdiapo.length) si la variable i est inférieur aux nombres d’entrées du tableau
          document.images[nomimg].src=imgdiapo[i]; on attribue à l’image la nouvelle source prise dans le tableau en fonction de i
          setTimeout("diapoauto()",timing); on relance la fonction toutes les x milisecondes
          i++; on ajoute 1 à la valeur de i afin de passer à la source suivante
          if(i==imgdiapo.length){
          i=0;
          }
          si i est égale au nombre de valeurs entrées dans le tableau, c’est alors qu’on est arrivé à la dernière image, on remet donc la valeur de la variable i à 0 pour revenir à la première image
          
          
          
          Diaporama avec boutons
          
          

          CODE

          imgdiapo2=new Array("img/modo01.gif", "img/modo02.gif", "img/modo03.gif", "img/modo04.gif", "img/modo05.gif", "img/modo06.jpg", "img/modo07.gif", "img/modo08.png"); nomimg2="diapo2"; compt=-1; function diapobouton(sens){ if(sens==1 && compt<(imgdiapo2.length-1)){  compt+=sens;  document.images[nomimg2].src=imgdiapo2[compt]; } else if(sens==-1 && compt!=0){  compt+=sens;  document.images[nomimg2].src=imgdiapo2[compt]; } }

          
          
          
          
          Définir toutes les sources possibles dans un tableau et naviguer dans ce tableau pour modifier la source d’une image
          
          • Variables :
            imgdiapo2 est un tableau contenant les chemins vers les images à afficher
            nomimg2 correspond au nom donné à l’image
            
          • Paramètres :
            - "1" pour passer à l’image suivante
            - "-1" pour passer à l’image précédente
            
          • Explication :
            compt=-1; on définit une variable qui permettra de se référer à l’image en cours d’affichage
            if(sens==1 && compt<(imgdiapo2.length-1)) si on veut passer à l’image suivante, on vérifie que l’on ne va pas aller au delà du nombre d’images définies
            compt+=sens;
            document.images[nomimg2].src=imgdiapo2[compt];
            on ajoute 1 au compteur et on utilise le compteur pour piocher dans le tableau la source à afficher et l’attribuer à l’image
            else if(sens==-1 && compt!=0) si on veut passer à l’image précédente, on vérifie que le compteur n’est pas égal à 0
            compt+=sens;
            document.images[nomimg2].src=imgdiapo2[compt];
            on retire 1 au compteur et on utilise le compteur pour piocher dans le tableau la source à afficher et l’attribuer à l’image
            
            
            
            img:coupe
            voir la page d'exemple avec l'objet Images
            voir la page d'exemple avec le modèle DOM
            télécharger les deux pages d'exemple