Dans certains de mes sites où les utilisateurs peuvent afficher une photo dans leur page profil avec un simple lien extérieur, il arrive souvent (je dirais même que c’est majoritairement le cas) que la taille de la photo est trop grande par rapport à la mise en page de l’espace qui leur est alloué, et dans cette situation, il n’est pas possible de connaître la taille de l’image à l’avance. Comment faire pour s’assurer que cette photo ne casse pas la présentation de la page? Il y a un petit truc en javascript qui nous permets de la réduire lorsque la page est téléchargée.
En premier lieu, il faut déterminer la largeur maximale que nous sommes prêts à donner pour une image. Dans mon exemple, je vais choisir la largeur de 300 pixels.
Le code javascript est exécuté lorsque l’image commence à s’afficher. Quand le navigateur web détermine que la largeur de l’image est plus grande que 300 pixels, il la réajuste de façon appropriée pour notre largeur maximale, 300 pixels. Comme on peut voir, il n’est pas possible d’indiquer les dimensions de l’image puisque nous le savons pas à l’avance, d’où l’importance de cette procédure pour protéger la mise en page.
Ce petit truc n’est pas parfait, toutefois, parce qu’il peut y avoir un délai de quelques secondes où l’image est téléchargée dans ses dimensions originales avant que le code l’adapte. Mais c’est mieux que rien.
Ensuite, on veut permettre aux visiteurs de voir l’image dans sa grandeur originale si ça leur tente.
Si un visiteur positionne le curseur au-dessus de l’image et que la taille de celle-ci a été réajustée, la balise title de l’image affiche notre message "Cliquer pour voir l'image". Enfin, si le visiteur clique l’image pour la visionner, on ouvre une nouvelle fenêtre pour afficher l’image dans sa grandeur naturelle.