Affichez une image en html

La balise html qui vous permettra d’appeler une image est la balise img :

<img src="http://www.monserveur.com/monimage.jpg">

Si l’image sur trouve par exemple dans un dossier Medias, lui même dans un dossier Site, le code d’appel depuis une page sera :

<img src="http://www.monserveur.com/Site/Medias/monimage.jpg">

On pourra ajouter le paramètre alt, qui sert à décrire l’image, et qui apparait en info-bulle sur certain navigateur.

<img src="http://www.monserveur.com/monimage.jpg" alt="Ma super image">

Si on veut faire un lien à suivre en cliquant sur l’image, on entourera la balise image par une balise de lien :

<a href="http://www.monlien.com"><img src="http://www.monserveur.com/monimage.jpg" alt="Ma super image"></a>

Une bordure apparait sur certain navigateur, qu’on peut enlever (ou accentuer, bien que rarement harmonieux) avec le paramètre border :

<a href="http://www.monlien.com"><img src="http://www.monserveur.com/monimage.jpg" alt="Ma super image" border="0"></a>

Une petite idée pour créer facilement des vignettes en html à partir des codes précédents, et en utilisant le paramètre width, height ou les deux, qui indique la largeur ou la hauteur de l’image :

<a href="http://www.monserveur.com/monimage.jpg" target="_blank"><img src="http://www.monserveur.com/monimage.jpg" alt="Ma super image" border="0" width="100 px"></a>

Résultat : on a une vignette de 100 pixels de large (la hauteur se met automatiquement à la même proportion), et quand on clique, on tombe sur l’image en grand dans une nouvelle fenêtre.

Ce n’est pas la panacée, mais cela peut être bien amélioré avec du javascript, pour donner les bonnes dimensions à la nouvelle fenêtre, permettre de la fermer en un clic...