Objet Window.document.Image


IMAGE (tableau d'images)

Cet objet représente une image dans un formulaire HTML


Le constructeur Image():

Le but d'utiliser un objet image avec le constructeur Image() est de charger une image du réseau et de la décoder avant que l'on est besoin de l'afficher. Puis, lorsque l'image doit être affichée, la propriété SRC de l'image peut être fixée à la même valeur que celle utilisée ultérieurement. Le résultat sera que l'image sera obtenue de la mémoire cache plutôt que d'être chargée du réseau. Il est possible d'utiliser cette technique pour créer de l'animation ou pour afficher une de plusieurs images suite aux entrées d'un formulaire.

Exemple:

monImage = new Image()
monImage.src = "uneImage.gif"
...
document.images[0].src = monImage.src


Le tableau images :

Il est possible de faire référence à une Image en utilisant le tableau d'images. Ce tableau possède une entée pour chaque objet "Image" ( marqueur <IMG>) dans l'ordre du code de votre document. Les images créées avec le constructeur d'image() ne sont pas considérées dans le tableau d'images. Par exemple, si votre document possède trois images, ces dernières seront représentées de la façon suivante:

document.images[0]
document.images[1]
document.images[2]
Les éléments dans un tableau d'images doivent être utilisés en lecture seulement.


Syntaxe:

Pour définir une image, il faut utiliser la syntaxe HTML habituelle:

<IMG SRC="URL" ..>


Pour créer un objet "Image":

nomImage = new Image([largeur,hauteur])

nomImage est soit le nom d'un nouvel objet ou la propriété d'un objet existant.
largeur est la largeur en pixel de l'image.

hauteur est la hauteur en pixel de l'image.


Pour utiliser les propriétés d'un objet "Image":

1. nomImage.nomPropriété
2. document.images[index].nomPropriété
3. nomFormulaire.elements[index].nomPropriété

nomImage est la valeur de l'attribut NAME d'un objet "Image".
nomFormulaire est soit la valeur de l'attribut NAME d'un objet "form" ou un élément dans le tableau de formulaires.

index, lorsque utilisé dans le tableau d'images, est un entier ou une chaîne de caractères représentant un objet "Image". Lorsque utilisé dans le tableau d'éléments, index est un entier représentant un objet "Image" dans un formulaire.


Pour définir un événement pour un objet Image créer avec le constructeur Image():

nomImage.onabort = appelFonction
nomImage.onerror = appelFonction
nomImage.onload = appelFonction

nomImage est soit le nom d'un nouvel objet ou la propriété d'un objet existant.
appelFonction est soit le mot clé "null", le nom d'une fonction, une variable ou une propriété qui contient le mot clé "null" ou une référence valide d'une fonction.


Pour utiliser le tableau d'images:

1. document.images[index]
2. document.images.length

index est un entier représentant une image dans le document ou une chaîne de caractères contenant le nom d'un objet "Image".

Pour obtenir le nombre d'images dans un document, il faut utiliser la propriété "length".


Objet utilisé:

document


Propriété utilisée:

L'objet "Image" possède les propriétés suivantes:

border (représente l'attribut BORDER)
complete (une valeur boléenne indiquant si le navigateur a réussi ou non à charger une image)
height (représente l'attribut HEIGHT)
hspace (Représente l'attribut HSPACE)

lowsrc (Représente l'attribut LOWSRC)
name (Représente l'attribut NAME)
prototype (permet d'ajouter une propriété à un objet "Image")
src (représente l'attribut SRC)
vspace (représente l'attribut VSPACE)
width (représente l'attribut WIDTH)

Note: Les propriétés border, hspace, name et vspace ne sont d'aucune utilité pour les images créées avec le constructeur d'images.


Le tableau d'images possède la propriété suivante:

length (représente le nombre d'images dans un document)


Méthode utilisée:

aucune


Événement utilisé:

onAbort
onError
onLoad

Exemple IMAGE (tableau d'images)

<SCRIPT LANGUAGE="JavaScript">
delai = 100
Numero = 0
MonImage = new Array()
for(i = 0; i < 10; i++) {
MonImage[i] = new Image()
MonImage[i].src = "gif/" + i + ".gif"
}
function animate() {
document.animation.src = MonImage[Numero].src
Numero++
if(Numero>= 10) {
Numero = 0
}
}
</SCRIPT>
<IMG NAME="animation" SRC="gif/0.gif""
onLoad="setTimeout('animate()', delai)">


Christophe Merlet
redfox@redfoxcenter.org
©Tous droits réservés
21 novembre 1998