Nous allons créer un
document HTML qui affiche des nombres à 4 chiffres à l'aide d'images. Celles-ci sont contenues
dans les fichiers zero.gif, un.gif, deux.gif, etc...
A chaque image contenue dans un document HTML correspond en JavaScript un objet de type Image. La liste de toutes les images est contenue dans le tableau images de l'objet document. Ce tableau donne accès à une image soit à partir de son numéro d'ordre (en partant de 0), soit à partir de son nom.
Les objets de type Image ont une propriété essentielle nommée src : elle contient le nom du fichier source correspondant à l'image. Cette propriété est accessible en lecture et en écriture, on peut donc modifier une image en modifiant son fichier source. Ainsi, pour modifier le contenu d'une image nommée "img1" en lui faisant afficher le fichier "ima1.gif", il suffira d'écrire :
document.images["img1"].src="ima1.gif";
Attention, les dimensions de l'image ne peuvent pas être modifiées, elles restent égales à celles indiquées avec la balise HTML IMG.
Nous allons créer un
document HTML qui affiche des nombres à 4 chiffres à l'aide d'images. Celles-ci sont contenues
dans les fichiers zero.gif, un.gif, deux.gif, etc...
Le code HTML consiste à créer un tableau de 4 cases contenant chacune l'image du chiffre 0, puis un formulaire contenant une ligne de saisie du nombre à afficher. Les quatre images du tableau sont nommées img1, img2, img3 et img4.
Il nous reste à écrire la fonction affiche(); qui est appelée lors de l'appui sur le bouton "Afficher".
Pour réaliser l'affichage du nombre entré nous devons le transformer en une chaîne de 4 caractères représentant des chiffres, puis pour chaque caractère associer le nom de fichier image et l'image correspondants.
Nous pouvons réaliser ceci de la façon suivante :
Après avoir récupéré le nombre entré par l'utilisateur, nous ajoutons des 0 au débuts si le nombre s'écrit avec moins de 4 chiffres. On utilise ensuite une boucle for pour traiter ces chiffres. L'image correspondant au chiffre i est obtenue à partir du tableau images de l'objet document en écrivant :
document.images["img"+i]
Il reste à convertir le caractère i en nombre n et à utiliser le tableau noms pour associer le bon fichier à l'image.