HTML - I Link-Immagine

Le immagini sono utili per dare un po' di animazione e colore alla tua pagina. Creare un link connesso all'immagine non è inoltre molto difficile. Basta infatti introdurre all'interno dell'etichetta img la sorgente dell'immagine.

html<a href="http://www.tutorialehtml.com/" title="This is an HTML liked image">
	<img alt="alternative text for the liked image" src="/assets_tutorials/img/image.jpg" width="120" height="75" />
</a>

Demo

In alcuni casi il browser imposta di default un bordo all'immagine se l'immagine è collegata ad un link. Per evitare problemi di visualizzazione legati a ciò conviene quindi impostare il bordo manualmente.

html<a href="http://www.tutorialehtml.com/" title="Questa è un'immagine HTML amata">
	<img 	alt="testo alternativo per l'immagine gradita"
		src="/assets_tutorials/img/image.jpg"
		width="120"
		height="75"
		border="5"
		style="border:5px solid #337AB7" />
</a>

Demo

L'attributo per la definizione del bordo dell'immagine non è supportato in HTML5. Per questo ho incluso la definizione del bordo in linguaggio CSS.

HTML - Miniature

Le miniature (Thumbnails) sono versioni "alleggerite" di un'immagine. Per creare una miniatura basta salvare l'immagine originale con una qualità inferiore e creare un link che rimandi all'immagine originale a qualità completa.

html<a href="/assets_tutorials/img/image.jpg" title="Questa è un'immagine HTML amata">
	<img alt="testo alternativo per l'immagine gradita" src="/assets_tutorials/img/image.jpg" width="66" height="49" />
</a>

Demo