html--创建热点区域

标签：shape   sha   开头   图像   超链接   color   名称   标记   属性   

　　在浏览网页时，通常会出现在点击一张图片不同区域时，出现不同链接内容的情况，这就是图片的热点区域。所谓的热点区域，就是将一张图片划分成若干链接区域，访问者单击不同的区域，会链接到不同的目标页面。

　　在HTML5中，可以为图片创建3中类型的热点区域：矩形，圆形和多边形。创建热点区域使用<map>和<area>标记，其语法格式如下：

<img src="图片地址" usemap="#名称">
<map name="#名称"
      <area shape="rect" coords="10,10,100,100" href="#">
      <area shape="circle" coords="120,120,50" href="#">
      <area shape="poly" coords="78,13,81,14,53,32,85,38" href="#">
</map>

在以上语法格式中，需要注意以下几点。

(1)  要想建立图片热点区域，必须先插入图片。注意，图片必须增加usemap属性，说明该图像是热区映射图像，属性值必须以“#”开头，加上名字。

(2)  <map>标记只有一个属性name，其作用是为区域命名，其设置值必须与<img>标记的usemap属性值相同。

(3)  <area>标记主要是定义热点区域的形状及超链接，它有3个必需的属性。

*shape:控制划分区域的形状，取值有3个，分别是rect(矩形)，circle(圆形),poly(多边形)。

*coords：控制区域的划分坐标。如果shape属性的取值为rect，那么coords的设置值分别为矩形的左上角x,y坐标点和右下角x,y坐标点，单位为像素；如果shape属性值的取值为circle,那么coords的设置值分别是圆形圆心x,y坐标点和半径值，单位为像素；如果Shapes属性的取值为poly，那么coords的设置值分别为矩形各个点的x,y坐标，单位为像素。

*href：该属性为区域设置超链接的目标，设置值为“#”时，表示为空链接。

html--创建热点区域

标签：shape   sha   开头   图像   超链接   color   名称   标记   属性   

原文地址：https://www.cnblogs.com/yhc99/p/9826558.html