HTML - Links de Imagens

  »   HTML  »   HTML Tutorial - Links de Imagens

Com a ajuda de imagens você pode dar um pouco de cor e vida para a sua página de web. Transfoem a imagem em um link não é difícil. Você apenas precisa introduzir a fonte da imagem dentro da tag img e colocar dentro de uma tag de link. Só isso.

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

alternative text for the liked image

Em alguns casos, por default, alguns navegadores adicionam boras as imagens usadas como links, por ser fácil de diferenciar de uma imagem normal. Então para você não ter problemas para ver por causa do navegador, nós podemos definir um valor de borda.

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"
		border="5"
		style="border:5px solid #337AB7" />
</a>

Demo

alternative text for the liked image

O atributo de borda <img> não é suportado em HTML5. Incluiríamos uma regra CSS que você poderia usar no lugar.

HTML - Mniaturas

As miniaturas são versões pequenas (com menos KB) de alguma imagem com maior e melhor qualidade. Para fazer uma miniatura, salve a imagem em pior qualidade e menores dimensões. Então faça dessa imagem um link que leva até a imagem original de maior dimensão e qualidade.

html<a href="/assets_tutorials/img/image.jpg" title="This is an HTML liked image">
	<img alt="alternative text for the liked image" src="/assets_tutorials/img/image.jpg" width="66" height="49" />
</a>

Demo

alternative text for the liked image