Comment réajuster les dimensions d’une image trop grande automatiquement avec javascript

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.

<img onload="if (this.width > 300) { this.width=300; }" 
src="http://www.example.com/images/mon-portrait.jpg" alt="Portrait" />

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.

<img onload="if (this.width > 300) { this.width=300; }" 
onmouseover="if (this.width >= 300) { this.title= 'Cliquer pour voir l'image'; }" 
onclick="if (this.width >= 300) { window.open('http://www.example.com/mon-portrait.jpg', '_blank'); return false; }"
src="http://www.example.com/images/mon-portrait.jpg" alt="Portrait" />

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.

Partager cet article:

  • del.icio.us
  • Facebook
  • StumbleUpon
  • Twitter
  • LinkedIn

Catégories: Programmation web | Aucun commentaire »
Les tags de cet article:

Note: Merci pour vos commentaires, j'apprécie ceux qui partagent leurs avis et leurs expériences de webmestre, ou s'il y a lieu, indiquent une erreur dans mes tutoriels, mais je ne peux évidemment pas faire de support technique pour votre site, alors veuillez éviter d'en faire la demande dans cette section.

Laisser un commentaire