HTML - 图像链接

  »   HTML  »   HTML 教程-图像链接

随着图像的帮助下,你可以给一点使用寿命和色彩到一个网页。你可以给一点使用寿命和色彩到一个网页。转变图像插入一个链接不再是苦的了。 你只需要在标签的内部介绍图像的来源, img 然后把它变成一个链接标签,就这么简单。

html<a href="http://www.tutorialehtml.com/" title="This is an HTML liked image">
	<img alt="替代文本喜欢的图像" src="/assets_tutorials/img/image.jpg" width="120" height="75" />
</a>

Demo

替代文本喜欢的图像

在一些情况下,为易于从正常图像区分开,通过默认一些的浏览器添加一个边框到以链接所用的图像。 那么你不会具有因为其浏览器显示不同的问题,我们可设置其边界到一个定义的值。

html<a href="http://www.tutorialehtml.com/" title="这是一个链接的图像">
	<img 	alt="对于链接图像的代替文本"
		src="/assets_tutorials/img/image.jpg"
		width="120"
		height="75"
		border="5"
		style="border:5px solid #337AB7" />
</a>

Demo

对于链接图像的代替文本

图像的边界属性是 <img> 不在HTML5里所支持的。我替你可使用,包含一个CSS规则。

HTML - 缩图

缩图是一些图像的缩小版本实际上具有更大和更好质量。要做所图得以低质量与小尺寸保存其图像。然后制作这个图像链接将会引到更大尺寸的初始图像。

html<a href="/assets_tutorials/img/image.jpg" title="这是链接的图像">
	<img alt="对喜爱图像的替代文本" src="/assets_tutorials/img/image.jpg" width="66" height="49" />
</a>

Demo

对喜爱图像的替代文本