HTML - Liens image

Avec l'aide d'images vous pouvez donner un peu de vie et de couleur à une page internet. Transformez une image en lien n'est pas difficile cependant. Vous avez simplement besoin d'introduire la source de l'image, à l'intérieur de la balise img et ensuite la mettre dans une balise lien. Aussi simple que ca.

html<a href="http://www.tutorialehtml.com/" title="Ceci est un lien image HTML">
	<img alt="texte alternatif pour le lien image" src="/assets_tutorials/img/image.jpg" width="120" height="75" />
</a>

Demo

Dans certains cas, par défaut certains navigateurs ajoutent une bordure à l'image utilisée comme lien, pour la différencier facilement d'une image normale. Pour que vous n'ayez pas de problèmes de différentes vues selon le navigateur, nous pouvons donner à la bordure une valeur définie.

html<a href="http://www.tutorialehtml.com/" title="Ceci est un lien image HTML">
	<img 	alt="text alternatif pour le lien image"
		src="/assets_tutorials/img/image.jpg"
		width="120"
		height="75"
		border="5"
		style="border:5px solid #337AB7" />
</a>

Demo

L'attribut bordure <img> n'est pas supporté en HTML5. J'ai inclus une règle CSS que vous pouvez utiliser à la place.

HTML - Vignettes

Les vignettes sont des versions miniatures (beaucoup moins de kB) d'images qui sont en réalité beaucoup plus grosses et d'une meilleure qualité. Pour faire une vignette, sauvegardez l'image dans une mauvaise qualité et en petites dimensions. Ensuite faites de cette image un lien qui dirigera vers l'image initiale de plus grande dimension.

html<a href="/assets_tutorials/img/image.jpg" title="Ceci est un lien image HTML">
	<img alt="alternative text for the liked image" src="/assets_tutorials/img/image.jpg" width="66" height="49" />
</a>

Demo