Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Traitement des images en Javascript

Compatible JavaScript. Cliquer pour en savoir plus sur les compatibilités.Par Nanoum (Anne Weisbeck), le 10 juin 2005

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 :

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.

document.images["nom_d_l_image"]

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

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 :

Propriétés Définition Accès
border correspond à la valeur border de la balise lecture - écriture
complete sauvegarde si l'mage est totalement chargée (complete=true) ou non (complete=false) lecture
height correspond à la valeur height de la balise lecture - écriture
hspace correspond à la valeur hspace de la balise lecture - écriture
length retourne le nombre d'images de la page lecture
lowsrc correspond à la valeur lowsrc de la balise lecture
name correspond à la valeur name de la balise lecture
src correspond à la source de l'image lecture - écriture
vspace correspond à la valeur vspace de la balise lecture - écriture
width correspond à la valeur width de la balise lecture - écriture

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

document.all["identifiant"]

Pour Internet Explorer inférieur à 5

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 :

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 Définition Accès
className classe css appliquée à l'élément lecture - écriture
dir sens de lecture lecture - écriture
id identifiant de l'élément lecture - écriture
lang langue du pays lecture - écriture
title titre lecture - écriture

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

Propriétés Définition Accès
align alignement de l'image lecture - écriture
alt texte alternatif à l'image lecture - écriture
border taille de la bordure lecture - écriture
height hauteur de l'image lecture - écriture
hspace marges sur les côtés de l'image lecture - écriture
isMap pour une image interactive côté serveur lecture - écriture
longDesc lien vers un fichier descriptif de l'image lecture - écriture
lowSrc lien vers un apercu graphique de l'image lecture - écriture
name nom donné à l'image lecture - écriture
src source de l'image lecture - écriture
useMap lien vers un mapping lecture - écriture
vspace marge dessus et sous l'image lecture - écriture
width largeur de l'image lecture - écriture

La fonction Image()

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

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).

Application - fonctions exemples

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

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

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 */
 

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

 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

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

 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

 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 */
 

Pages d'exemples