SELFHTML: JavaScript / Référence objet JavaScript / images

SELFHTML/Quickbar JavaScript Référence objet

images

images: généralités pour l'utilisation

Propriétés:

border (cadre)
complete (état du chargement)
height (hauteur)
hspace (espace horizontal)
length (nombre de graphiques)
lowsrc (graphique- aperçu)
name (nom)
src (fichier graphique)
vspace (espace vertical)
width (largeur)

Méthodes:

handleEvent() (traiter un évènement)

images: généralités pour l'utilisation

Avec l'objet images, qui se trouve sous l'objet document dans la hiérarchie objet JavaScript, vous avez accès à tous les graphiques définis dans un fichier HTML. Cela vous permet aussi de remplacer de façon dynamique des graphiques existants par d'autres.

Un nouvel objet graphique est créé automatiquement quand le navigateur WWW trouve un graphique dans le fichier HTML.

Il existe les manières suivantes à votre disposition pour adresser un graphique déterminé avec JavaScript:

Schéma 1 / exemple 1:

document.images[#].propriete
document.images[#].methode()

hauteur = document.images[0].height;

Schema 2 / exemple 2:

document.nomimage.propriete
document.nomimage.methode()

hauteur = document.Portrait.height;

Explication:

Vous pouvez adresser les objets graphiques de deux façons:

avec un numéro d'index (comme dans le schéma 1 /exemple 1)
Pour l'utilisation de numéros d'index, mentionnez document.images suivi, entre crochets, du numéro d'ordre du graphique que vous voulez adresser dans le fichier. Chaque graphique, qui a été noté avec <img> dans le fichier HTML, compte. Pensez que le compteur commence à 0, c'est à dire qu'il vous faut adresser le premier graphique avec images[0], le deuxième avec images[1] etc... Pour compter, prévaut l'ordre dans lequel les commandes <images> sont notées dans le fichier.
avec le nom du graphique (comme dans le schéma 2 /exemple 2)
Pour cela, mentionnez avec document.nomimage le nom du graphique que vous avez mentionné dans l'attribut name= lors de la définition du graphique dans les repères HTML correspondants.

Pour des graphiques, que vous voudriez afficher en supplément avec JavaScript, vous devrez cependant créer un nouvel objet graphique distinct en JavaScript. C'est particulièrement important quand vous voulez remplacer de façon dynamique des graphiques par d'autres graphiques.

Exemple:

seconde = new Image();
seconde.src = "bleu.gif";
document.images[0].src = seconde.src;;

Explication:

Vous sauvegardez un nouvel objet graphique en lui attribuant vous-même un nom d'objet, dans l'exemple ci-dessus, le nom seconde. Derrière le nom suit le signe égal. Ensuite, c'est le mot réservé new et l'appel de la fonction objet Image() (première lettre en majuscule!).

Après quoi, vous pouvez travailler avec l'instance nouvellement créée. Ainsi vous pouvez affecter à l'instance un fichier graphique par la propriété src de l'objet images - dans l'exemple le fichier bleu.gif. La troisième ligne de l'exemple montre une instruction grâce à laquelle vous pouvez remplacer de façon dynamique un graphique existant. À supposer que dans le fichier HTML ait été incorporée comme premier graphique une image rouge avec <img src="rouge.gif">. Avec l'aide de JavaScript, vous pouvez, par exemple si l'utilisateur clique sur un lien, remplacer cette image rouge par une autre bleue.

Attention:

Un exemple d'application pour la mise en oeuvre de graphiques interchangeables de façon dynamique peut être trouvé dans ce document: boutons graphiques dynamiques.

border

Sauvegarde la mention pour le cadre d'un graphique comme elle est possible avec la mention border= dans le repère <img>. Netscape sauvegarde également une valeur, même si la mention manque dans le repère HTML. L'Explorer Internet MS ne sauvegarde une valeur que si elle est mentionnée dans le repère HTML.

Exemple:

<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.Anna.border)">
<img src="anna.jpg" border=3 name="Anna">
</a>
</body></html>

Explication:

L'exemple contient un graphique contenu dans un lien. En cliquant sur ce lien, la valeur sauvegardée dans la mention border= est sortie avec alert().

complete

Sauvegarde si un graphique est chargé complètement ou non. Contient la valeur true, si le graphique est chargé, et la valeur false, s'il ne l'est pas ou s'il n'est pas chargé complètement.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
function verifimage()
{
 var Status = "";
 for(i = 0; i < document.images.length; ++i)
 {
  if(document.images[i].complete == true)
   Status = Status + "Graphique " + (i+1) + " chargé\n";
  else
   Status = Status + "Graphique " + (i+1) + " non chargé\n";
 }
 Status = Status + document.images.length + " graphiques dans le document ";
 alert(Status);
}
</script>
</head><body>
<img src="bernard.gif"><br>
<img src="boris.jpg"><br>
<img src="charles.gif"><br>
<a href="javascript:verifimage()">vérifier les graphiques </a>
</body></html>

Explication:

L'exemple contient plusieurs graphiques et un lien. En cliquant sur le lien, la fonction verifimage() est appelée, elle est définie dans un passage JavaScript de l'entête de fichier. Cette fonction recherche dans une boucle for si pour chaque graphique distinct du fichier (communiqué par document.images.length) celui-ci est chargé (if(document.images[i].complete == true)) ou non. Le résultat est rassemblé dans une variable Status. À la fin, le contenu de Status est sorti avec alert().

height

Sauvegarde la mention sur la hauteur d'un graphique telle qu'elle est possible avec la mention height= dans le repère <img>. Une valeur est même sauvegardée si la mention manque dans le repère HTML.

Exemple:

<html><head><title>Test</title>
</head><body>
<img src="christa.gif" name="Christa">
<script language="JavaScript">
document.write(document.Christa.name + "<br>");
document.write(document.Christa.width + " x " + document.Christa.height + " Pixel");
</script>
</body></html>

Explication:

L'exemple contient un graphique. En dessous est noté un passage JavaScript dans lequel le nom de l'image, sa largeur et sa hauteur sont écrits avec document.write().

hspace

Sauvegarde la mention sur l'espace horizontal entre un graphique et les éléments qui le jouxtent à gauche ou à droite, comme elle est possible dans la mention hspace= dans le repère <img>. Si la mention manque dans le repère HTML, la valeur de la propriété hspace de l'objet images est 0.

Exemple:

<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.Dorian.hspace)">
<img src="dorian.jpg" hspace=30 name="Dorian">
</a>
</body></html>

Explication:

L'exemple contient un graphique contenu dans un lien. En cliquant sur ce lien, la valeur sauvegardée dans la mention hspace= est sortie avec alert().

length

Sauvegarde le nombre de graphiques dans un fichier.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
</script>
</head><body>
<img src="emma.jpg"><br>
<img src="elisa.gif"><br>
<img src="ellen.jpg"><br>
<script language="JavaScript">
document.write("<hr>La page contient " + document.images.length + " graphiques");
</script>
</body></html>

Explication:

L'exemple contient plusieurs graphiques. À la fin se trouve un passage JavaScript, dans lequel le nombre d'images est écrit avec document.write() dans le fichier.

lowsrc

Sauvegarde la mention de l'aperçu du graphique comme elle est possible avec la mention lowsrc= dans le repère <img>. Si la mention manque dans le repère HTML, la propriété lowsrc de l'objet images ne contient aucune valeur. Si une mention pour lowsrc= est disponible, la propriété d'objet reçoit chez Netscape l'adresse URL complète, chez l'Explorer Internet MS exactement la mention qui se trouve dans le repère HTML.

Exemple:

<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.images[0].hspace)">
<img src="nicolas.jpg" lowsrc="nico.jpg">
</a>
</body></html>

Explication:

L'exemple contient un graphique défini comme devant être affiché en aperçu avec lowsrc= et contenu dans un lien. En cliquant sur ce lien, la valeur sauvegardée dans la mention lowsrc= est sortie avec alert().

name

Sauvegarde le nom d'un graphique comme il est possible avec la mention name= dans le repère <img>. Si la mention manque dans le repère HTML, la propriété d'objet name ne contient aucune valeur.

Exemple:

<html><head><title>Test</title>
</head><body>
<img src="gabi.gif" width=400 height=300 name="Gabi">
<script language="JavaScript">
  document.write("<br>" + document.images[0].name);
</script>
</body></html>

Explication:

L'exemple contient un graphique sous lequel est noté un passage JavaScript où le nom d'image du graphique s'écrit dans le fichier avec document.write().

src

Sauvegarde la mention d'un graphique affiché, comme elle est possible avec la mention src= dans le repère <img>. Cette propriété peut être modifiée, vous offrant ainsi la possibilité de remplacer des graphiques par d'autres de façon dynamique. Veillez cependant que la largeur et la hauteur du graphique noté d'origine dans le fichier HTML soient les mêmes que pour le graphique dynamique correspondant. Pour obtenir des effets sans distorsion, tous les graphiques qui en remplacent d'autres de façon dynamique doivent avoir la même hauteur et la même largeur que ceux qu'ils vont devoir remplacer.

Exemple:

<html><head><title>Test</title>
</head><body>
<img src="hans.gif" width=400 height=300>
<script language="JavaScript">
 var b = new Array();
 b[0] = new Image(); b[0].src = "henri.gif";
 b[1] = new Image(); b[1].src = "hilmar.gif";
 b[2] = new Image(); b[2].src = "heiner.gif";
 b[3] = new Image(); b[3].src = "hans.gif";
 var i = 0;
 function Animation()
 {
  if(i > 3) i = 0;
  document.images[0].src = b[i].src;
  i = i + 1;
  window.setTimeout("Animation()",1000);
 }
 window.setTimeout("Animation()",1000);
</script>
</body></html>

Explication:

L'exemple contient un graphique du nom de hans.gif sous lequel est défini un passage JavaScript qui fait en sorte que le graphique se transforme en un autre graphique automatiquement chaque seconde. Pour cela est noté dans un premier temps un Array du nom de b. Puis quatre éléments de cet Array b sont spécifiés. Dans les quatre cas il s'agit de nouveaux objets graphiques. À chacun des nouveaux objets graphiques est affecté par la propriété src un fichier graphique. Veuillez remarquer que le fichier hans.gif est mentionné de nouveau là, bien qu'il soit déjà affiché. Étant donné qu'il doit être intégré dans l'animation, il faut malgré tout créer pour ce graphique un autre objet graphique distinct.

À l'intérieur de la fonction Animation(), appelée pour la première fois sous la fonction, l'image actuelle est à chaque fois remplacée par une autre. Cela se fait en affectant b[i].src à document.images[0].src. Étant donné que b[i] est dépendant de la variable i, modifiée à chaque appel de fonction, c'est à chaque fois une autre des quatre images qui est affichée. À la fin, la fonction Animation() se rappelle elle même. C'est ce qui crée cet effet de boucle sans fin. L'appel est incorporé dans un setTimeout(), qui diffère l'appel suivant de 1000 millièmes de seconde - donc d'une seconde.

vspace

Sauvegarde la mention d'espace vertical entre un graphique et les éléments qui le jouxtent en haut et en bas, comme elle est possible avec la mention vspace= dans le repère <img>. Si la mention manque dans le repère HTML, la propriété d'objet vspace a la valeur 0.

Exemple:

<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.Ina.vspace)">
<img src="ina.jpg" vspace=8 name="Ina">
</a>
</body></html>

Explication:

L'exemple contient contient un graphique contenu dans un lien. En cliquant sur ce lien, la valeur sauvegardée dans la mention vspace= est sortie avec alert().

width

Sauvegarde la mention sur la largeur d'un graphique comme elle est possible avec la mention width= dans le repère <img>. Il y a même une valeur sauvegardée si la mention manque dans le repère HTML.

Exemple:

<html><head><title>Test</title>
</head><body>
<img src="joseph.jpg" name="Joseph">
<script language="JavaScript">
document.write(document.Joseph.name + "<br>");
document.write(document.Joseph.width + " x " + document.Joseph.height + " pixels");
</script>
</body></html>

Explication:

L'exemple contient un graphique en dessous duquel est noté un passage JavaScript où le nom d'image et les mentions de largeur et de hauteur du graphique s'écrivent dans le fichier avec document.write().

handleEvent()

Transmet un évènement à un élément en mesure de réagir à cet évènement. fonctionne exactement comme le handleEvent() pour l'objet window (s'y reporter pour plus d'informations).


après:	layers
avant:	options

SELFHTML/Quickbar JavaScript Référence objet