Présentations d'images
Le plus grand
ennemi de la fréquentation d’un site est souvent l’impatience du visiteur.
C’est pourquoi il est conseillé de créer de petites pages, rapides à charger.
Cette directive est parfois difficile à suivre. Je repense à l’exemple de ce
marchand, qui ne pouvait pas faire autrement que d’insérer les photos de ses
meubles sur ses pages Web. Malgré une subdivision draconienne et une diminution
de la taille de ses images, le temps de chargement de ses pages restait trop
élevé. Java script permet de trouver une solution à ce cas.
Le problème vient en grande
partie du nombre d’images à charger. Pour le résoudre, il faut en afficher une
seule et laisser l’initiative du choix au visiteur. Pour ce faire offrons lui
une barre de navigation qui lui permettra de passer d’une image à l’autre. Pour
une visite plus agréable, donnons lui aussi la possibilité de les faire défiler
automatiquement les unes après les autres. Et enfin, s’il cherche un élément
précis, affichons la liste de toutes les images.
Structure du site
La première page, donnant accès à tous les types
d’articles, doit se trouver dans la racine principale. Chaque collection
d’images à présenter doit posséder son propre répertoire qui contient la page
de présentation. Les photos sont stockées sous le nom img0.jpg et les pages explicatives sous page0.htm.
Page de
présentation
Une des disposition possible est la suivante : un
tableau de 2 colonnes, dont la partie de gauche sert de barre de navigation et
la partie de droite d’écran d’affichage.
Au travail
Commençons le document et donnons y un titre :
Présentation
<html>
<head>
<title>Presentation</title>
</head>
Au début du corps du document, introduisons nos routines Java scripte.
<body>
<script language="JavaScript">
<!--Cacher à la lecture des anciens navigateurs
var max = 4
var definition = new Array(max-1)
var ImageEnCours = 0
var timeout = 0
var Vitesse = 800
Nous aurons besoin des variables suivantes :
-
Max : le nombre d’images que l’on peut afficher.
- Definition : tableau contenant les descriptifs.
- ImageEnCours : numéro de l’image affichée.
- Timeout : horloge pour le défilement.
- Vitesse : Vitesse de défilement des images.
Le tableau a été défini : Array (max-1), car il ne
faut pas oublier qu’un tableau commence par l’élément 0. Nous appliquons ce
principe lors de la définition des noms à afficher :
definition[0]="Un"
definition[1]="Deux"
definition[2]="Trois"
definition[3]="Quatre"
Affiche la liste des images
Pour construire la liste des images ou objets disponibles,
il faut obtenir une ligne dans la page Html qui ressemble à :
<a href="#" onclick="ChargeImage(0);">Image 1</a>
Il faut donc écrire dans le document
même :
function AfficheDefinitions()
{
for (var i=0; i < max; i++)
{
sp= "\""
s="<a href="+sp+"#"+sp+" onclick="+sp+"ChargeImage("+i+");"+sp+">" +definition[i]+"</a>"
document.write(s)
document.writeln("<br>")
}
}
Charger une image
Nous arrivons au centre vital de
la page, sans quoi rien ne fonctionnerait.
function ChargeImage(NumImage)
{
document.images[0].src = "img" + (NumImage) +".jpg"
document.links[max].href="page"+NumImage+".htm"
document.links[max+1].href="page"+NumImage+".htm"
}
L’objet Document, qui est en fait
notre page, contient 2 objets qui nous seront très utiles : Images et
Links. Notre page ne comprenant qu’une seule photo, nous savons que son index
est 0. Pour changer l’image affichée, il suffit de modifier sa propriété scr,
qui représente le chemin de l’image affichée. Comme il faut que les liens
menant au descriptif complet de l’article pointe sur la bonne page, utilisons
la table de liens de l’objet Document et modifions le routage. Dans notre
exemple, l’avant dernier lien est celui de l’image et le dernier celui du texte
situé juste en dessous.
Un peu de
navigation
Le traitement des quatre boutons de navigation se fait simplement :
function PremiereImage()
{
ImageEnCours=0
ChargeImage(ImageEnCours)
}
function ImagePrecedente()
{
ImageEnCours--
if (ImageEnCours < 0)
{
ImageEnCours = max-1
}
ChargeImage(ImageEnCours)
}
function ImageSuivante()
{
ImageEnCours++
if (ImageEnCours > max-1 )
{
ImageEnCours = 0
}
ChargeImage(ImageEnCours)
}
function DerniereImage()
{
ImageEnCours = max-1
ChargeImage(ImageEnCours)
}
Il faut simplement être attentif
au fait que la dernière image a toujours la valeur max-1 et que la première a
comme valeur 0. Il ne faut pas non plus oublier, à chaque opération, de
mémoriser la page affichée dans la variable ImageEnCours, particulièrement dans
PremiereImage et dans DerniereImage.
Ainsi lors de l’utilisation du défilement continu, la routine commencera par
l’image suivante.
Défilement continu
Le défilement continu se fait tout simplement en affichant
l’image suivante et en initialisant le timer avec la vitesse définie lors de
l’initialisation des variables.
function ImageContinu()
{
ImageSuivante()
timeout = setTimeout("ImageContinu()", Vitesse)
}
function Arret()
{
clearTimeout(timeout)
}
// -->
<script>
La page HTML
<table border="0" width="500">
<tr>
<td width="150">
<form method="POST">
<p>
<input type="button" name="defile" value="Défile" onClick="ImageContinu()">
<input type="button" name="stop" value="Stop" onClick="Arret()">
</p>
<p>
<input type="button" name="prem" value="¦<" onClick="PremiereImage()">
<input type="button" name="moins" value="<" onClick="ImagePrecedente()">
<input type="button" name="plus" value=">" onClick="ImageSuivante()">
<input type="button" name="der" value=">¦" onClick="DerniereImage()">
</p>
</form>
<p>
<br>
<script language="JavaScript">
AfficheDefinitions()
</script>
<br>
<br>
<br>
</p>
</td>
<td>
<p align="center">
<a href=""><img src="" border="0" width="200" height="100"></a>
<br>
<a href="">Voir le détails</a>
</p>
</td>
</tr>
</table>
<script language="JavaScript">
ChargeImage(0)
</script>
</body>
</html>
Cette dernière partie est plus précisément du HTM et de la
mise en page. Deux éléments sont importants : AfficheDefinitions() et
chargeImage(0) car ils complètent la mise en page et mettent en place les
divers éléments.
Dernier mot
A vous d’utiliser cet exemple dans vos page Web. Mais
n’oubliez pas deux choses : La référence aux images et aux liens peut varier.
Si le logo de votre entreprise précède l’image d’affichage, l’index de cette
dernière sera 1 et non plus 0.
L’exemple est utilisable, tel quel, pour 20 à 30 images
à afficher. Si vous en avez plus, il
faudra travailler avec deux frames, au lieu d’un tableau à deux colonnes. La
méthode est la même, mais il faut tenir compte des cadres et subdiviser ces
routines.
Essayez d’avoir des images de
même dimension. Sur Internet Explorer, il est possible de ne pas tenir compte
de la dimension de la première image chargée. Netscape, par contre, va adapter
toutes les images à la taille de la première qui a été affichée. Alors
attention aux déformations.
Mais vous n’êtes pas obligés
d’être aussi sérieux avec ce source. Pourquoi ne pas l’adapter pour nous faire
partager vos dernières photos de vacances.
Voir l'exemple
|
