入门HTML之图片对齐方式，图像超链接，图像的映射

最新推荐文章于 2023-01-15 03:33:38 发布

原创最新推荐文章于 2023-01-15 03:33:38 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了HTML中图片的常见对齐方式，并详细讲解了图像映射的概念，包括<map>元素的name属性、usemap属性以及圆形、矩形和多边形的映射形状。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片的对齐方式
定义图片的垂直对齐方式：
<img src="sample.jpg" align="top" >
<img src="sample.jpg" align="middle">
<img src="sample.jpg" align="bottom" >

对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。

<html>
<head>
	<title>图片的垂直方式</title>
</head>
<body>
	<img src = "E://1.jpg" align = "top"><br>
	图片在顶部<br>
	<img src = "E://2.jpg" align = "middle"><br>
	图片在中间<br>
	<img src = "E://1.jpg" align = "bottom"><br>
	图片在底部<br>
</body>
</html>

定义图片与左、右的文本之间的间距
图片在显示时，与左右的文本之间可以有一定的间距
<img src="sample.jpg" hspace=5 vspace=5 >
Hspace(horizontal)定义水平间距； Vspace(vertical)定义垂直间距。单位都是象素数.

<html>
<head>
	<title>设置水平和垂直间距</title>
</head>
<body bgcolor = "#00ff00">
	<img src = "E://1.jpg" align = "left" hspace = 5 vspace = 5>
	<b>设置水平和垂直间距并不影响文字的显示位置</b><br>
	设置水平和垂直间距并不影响文字的显示位置<br>
	设置水平和垂直间距并不影响文字的显示位置<br>
	设置水平和垂直间距并不影响文字的显示位置<br>
	设置水平和垂直间距并不影响文字的显示位置<br>
	设置水平和垂直间距并不影响文字的显示位置<br>
	设置水平和垂直间距并不影响文字的显示位置<br>
	设置水平和垂直间距并不影响文字的显示位置<br>
	设置水平和垂直间距并不影响文字的显示位置<br>
	设置水平和垂直间距并不影响文字的显示位置<br>
	设置水平和垂直间距并不影响文字的显示位置<br>
	设置水平和垂直间距并不影响文字的显示位置<br>
	设置水平和垂直间距并不影响文字的显示位置<br>
	设置水平和垂直间距并不影响文字的显示位置<br>
</body>
</html>

图象的超级链接
图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是：
<a href=“http://www.enet.com.cn/eschool”><img src="sample.jpg" ></a>
所以，所谓超级链接实际上就是用<a>元素标志一个图象的引用;

<html>
<head>
	<title>图像的超链接</title>
</head>
<body>
	<a href = "http://www.baidu.com"><img src = "E://1.jpg"></a>
	<a href = "http://www.baidu.com">百度首页</a>
</body>
</html>

图象映射
所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接；点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。

图象映射（只要求理解标记含义）
图象映射由<map>定义。<map>有一个基本属性是name。Name给图象映射命名，这个命名将会被<img>元素用usemap属性引用。所以，图象上的图象映射实际上是对<map>定义的映射的一个引用。
<map>在定义图象映射时，可以定义三种形状的映射： circle(圆形)、rect(矩形rectangle)、poly(多边形)

<img src="bear.jpg" usemap="#Map" > 
<map name=“Map"> 
<area shape="rect" coords="46,29,253,164" href="#" >
<area shape="circle" coords="76,510,59" href="#" >
<area shape="poly" coords="219,482,253,448,310,462,297,527,220,523" href="#" > 
</map>

<html>
<head>
	<title>图像映射实例</title>
</head>
<body>
	<img src = "E://1.jpg" width = "362" height = "265" border = "0" usemap = "#Map">
	<map name = "Map">
	<area shape = "ploy" coords = "110, 195, 151, 190, 149, 159, 108, 149, 91, 124, 44, 125, 36, 154" href = "http://www.baidu.com">
	</map>
</body>
</html>