SELFHTML/Aides à la navigation JavaScript/DOM Référence objet| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
 |
images |
|
Propriétés:
Méthode:
|
 | |
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:
document.images[#].propri�t� document.images[#].m�thode() hauteur= document.images[0].height; |
document.nom_image.propri�t� document.nom_image.m�thode() hauteur = document.portrait.height; |
Vous pouvez adresser les objets graphiques de deux façons:
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 <img> sont notées dans le fichier.document.nom_image le nom du graphique que vous avez mentionné dans l'attribut name= lors de la définition du graphique dans les repères HTML d'ouverture <img> 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.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
seconde_image =new Image(104,102)
seconde_image.src="cow2.gif";
document.write('<img src="'+seconde_image.src+'" border="0" alt="vache">');
alert("largeur: "+seconde_image.width+"\nhauteur: "+seconde_image.height);
//-->
</script>
</body></html>
|
Vous sauvegardez un nouvel objet graphique en lui attribuant vous-même un nom d'objet, dans l'exemple ci-dessus, le nom seconde_image. 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 cow2.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.
La fonction objet Image() connaît les deux paramètres facultatifs suivants.
1.width largeur de l'image
2.height hauteur de l'image
Vous pouvez mentionner ces paramètres lors de la création de l'image. Dans l'exemple, sont affichées la hauteur et la largeur du graphique.
Netscape 6.1 et Opera 5.12 n'interprètent pas ces paramètres facultatifs et sauvegardent la valeur 0 pour les hauteur et largeur du graphique.
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.
 |
borderSauvegarde la mention pour la bordure 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.
<html><head><title>Test</title> </head><body> <a href="javascript:alert(document.Anna.border)"> <img src="anna.jpg" border="3" alt="Anna" name="Anna"> </a> </body></html> |
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().
Avec Netscape 6.1 cette mention est erronée et contient comme valeur renvoyée -1.
La modification de la propriété border n'est jusqu'alors possible qu'avec l'Explorer Internet MS . Avec Netscape 6.1 la bordure existante est effacée lors d'une modification.
|
|
completeSauvegarde 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.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function verification_image() {
var Status = "";
for(i = 0; i < document.images.length; ++i)
{
if(document.images[i].complete == true)
Status = Status + "graphiques " + (i+1) + " geladen\n";
else
Status = Status + "graphiques " + (i+1) + " non charg�s\n";
}
Status = Status + document.images.length + " graphiques dans le document";
alert(Status);
}
//-->
</script>
</head><body>
<img src="berthold.gif" alt="Bernard"><br>
<img src="boris.gif" alt="Boris"><br>
<img src="bernd.gif" alt="Charles"><br>
<a href="javascript:verification_image()">v�rifier les graphiques</a>
</body></html>
|
L'exemple contient plusieurs graphiques et un lien. En cliquant sur le lien, la fonction verification_image() 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().
La propriété complete ne reçoit pas les valeurs correctes avec les navigateurs Netscape. Bien que dans l'exemple indiqué 2 graphiques n'aient pas pu être chargés, chez Netscape 6.1 la valeur "true" est mentionnée pour la propriété complete pour tous les graphiques. Les navigateurs plus anciens que Netscape jusqu'à la version 4 par contre mentionnent pour tous les graphiques la valeur "false" dans la propriété complete. Opera 5.12 et l'Explorer Internet MS interprètent correctement cette propriété.
|
|
heightSauvegarde 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.
<html><head><title>Test</title> </head><body> <img src="christa.gif" name="Christa" alt="Christa"> <script type="text/javascript"> <!-- document.write(document.Christa.name + "<br>"); document.write(document.Christa.width + " x " + document.Christa.height + " pixels"); //--> </script> </body></html> |
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().
Pour Netscape 6.1 la valeur 0 est sauvegardée dans la propriété height, si l'attribut height manque dans le repère HTML.
La modification de la propriété height n'est jusqu'alors possible que chez l'Explorer Internet MS et chez Netscape 6.1.
|
|
hspaceSauvegarde 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 est 0.
<html><head><title>Test</title> </head><body> <a href="javascript:alert(document.Dorian.hspace)"> <img src="dorian.jpg" hspace="30" name="Dorian" alt="Dorian"> </a> </body></html> |
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().
Netscape 6.1 et Opera 5.12 interprètent cette mention de façon erronée. Dans Netscape 6.1 est toujours sauvegardé -1 et dans Opera 5.12 0.
La modification de la propriété hspace n'est jusqu'alors possible que chez l'Explorer Internet MS. Chez Netscape 6.1, l'espace horizontal est effacé.
|
|
lengthSauvegarde le nombre de graphiques dans un fichier.
<html><head><title>Test</title>
</head><body>
<img src="anna.jpg" alt="Anna"><br>
<img src="dorian.gif" alt="�lisa"><br>
<img src="christa.gif" alt="Christelle"><br>
<script type="text/javascript">
<!--
document.write("<hr>La page contient " + document.images.length + " graphiques");
//-->
</script>
</body></html>
|
L'exemple contient plusieurs graphiques. À la fin se trouve un passage JavaScript, dans lequel le nombre d'images est écrit dans le fichier avec document.write().
|
|
lowsrcSauvegarde 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.
<html><head><title>Test</title> </head><body> <a href="javascript:alert(document.images[0].lowsrc)"> <img src="Nicolas.jpg" lowsrc="Nico.jpg" alt="Nicolas et Nico"> </a> </body></html> |
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().
|
|
nameSauvegarde 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.
<html><head><title>Test</title>
</head><body>
<img name="Anna" src="anna.jpg" width="271" height="265" border="0" alt="">
<script type="text/javascript">
<!--
document.write("<br>" + document.images[0].name);
//-->
</script>
</body></html>
|
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().
Dans Netscape 6.1 vous pouvez aussi modifier la propriété name.
|
|
srcSauvegarde 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.
<html><head><title>Test</title>
</head><body>
<img src="hans.gif" width="400" height="300" alt="Hans">
<script type="text/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>
|
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.
Dans la fonction Animation(), qui est appelée pour la première fois sous la fonction, l'image respectivement actuelle est remplacée par une autre. Cela intervient grâce à l'affectation de b[i].src à document.images[0].src. Étant donné que b[i] dépend de la variable i, qui est modifiée à chaque appel de fonction, c'est à chaque fois une autre des quatre images qui est affichée. À la fin, la fonction Animation() s'appelle à nouveau elle-même. Ainsi est créé l'effet de boucle sans fin. L'appel est incorporé dans un appel de setTimeout(), qui diffère à chaque fois le prochain appel de 1000 millièmes de secondes, à savoir d'une seconde.
Dans l'Explorer Internet et dans Netscape 6 vous pouvez également utiliser des graphiques de tailles différentes. Dans ce cas, il vous faut omettre les mentions de taille du graphique, à savoir modifier de façon dynamique, pour la hauteur, la propriété height et, pour la largeur, la propriété width.
|
|
vspaceSauvegarde 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.
<html><head><title>Test</title> </head><body> <a href="javascript:alert(document.Dorian.vspace)"> <img src="Dorian.jpg" vspace="8" name="Dorian" alt="Dorian"> </a> </body></html> |
L'exemple contient un graphique contenu dans un lien. En cliquant sur ce lien, la valeur sauvegardée dans la mention vspace= est sortie avec alert().
Netscape 6.1 et Opera 5.12 interprètent cette mention de façon erronée. Chez Netscape 6.1 c'est toujours -1 qui est sauvegardé et dans Opera 5.12 c'est 0.
La modification de la propriété vspace n'est possible jusqu'alors, qu'avec l'Explorer Internet MS. Avec Netscape 6.1 L'espace vertical est supprimé.
|
|
widthSauvegarde 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.
<html><head><title>Test</title> </head><body> <img src="Christa.jpg" name="Christa" alt="Christa"> <script language="JavaScript" type="text/javascript"> <!-- document.write(document.Christa.name + "<br>"); document.write(document.Christa.width + " x " + document.Christa.height + " pixels"); //--> </script> </body></html> |
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().
Dans Netscape 6.1, la valeur 0 est sauvegardée dans la propriété width, si cette mention manque dans le repère HTML.
La modification de la propriété width n'est possible jusqu'alors, qu'avec l'Explorer Internet MS.
|
|
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).
|
| |
 |
embeds
|
 |
options
|
| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@selfhtml.com.fr
