Tutorial HTML - Link-uri imagine

Cu ajutorul imaginilor poti da putina viata unei pagini web. Transformarea unei imagini intr-un link nu este nicidecum dificila. Trebuie doar sa introduci sursa imagini in interiorul tag-ului de link.

html<a href="http://www.tutorialehtml.com/" title="Aceasta este o imagine cu link in HTML">
	<img alt="imagine exemplu" src="/assets_tutorials/img/image.jpg" width="120" height="75" />
</a>

Demo

In general majoritatea browser-elor adauga o margine fotografiei folosite pentru link, pentru a o diferentiata de o fotografie normala.

Pentru a nu avea probleme de vizualizari diferite in functie de browser putem seta marginea la o valoare definita.

html<a href="http://www.tutorialehtml.com" title="Aceasta este o imagine cu link in HTML">
	<img alt="imagine exemplu" src="/assets_tutorials/img/image.jpg" width="120" height="75" style="border:4px solid #337AB7" />
</a>

Demo

HTML - Tumbnails

Tumbnails-urile sunt versinui in miniatura (mult mai putini kilobytes) a unor imagini care in realitate sunt mult mai mari si cu o calitate sporita. Pentru a realiza un tumbnail, salveza imaginea intr-o calitate mult mai scazuta cu dimensiuni reduse. Fa apoi aceasa imagine un link ce va conduce la imaginea initiala de de dimensiuni sporite.

html<a href="/assets_tutorials/img/image.jpg" title="Aceasta este o imagine cu link in HTML">
	<img alt="imagine exemplu" src="/assets_tutorials/img/image.jpg" width="66" height="49" />
</a>

Demo