Study 2 —— 图片热点区域

Posted 2020-10-16 yancy.lu

标记<map>和<area>
<img src="图片" usemap="#名称">
<map id="#名称">
    <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,86,38" href="#">        
</map>

语法格式：
（1）插入图片，增加图片属性usemap，说明该图像是热区映射图像，属性值必须以“#”开头，如#img.
那么上面的代码就应该为<img src="图片地址" usemap="#img">
（2）<map>标记只有一个属性id，其作用是为区域命名，属性值必须与<img>标记的usemap属性值相同。
修改上述代码为：<map id="#img">
（3）<area>标记主要是定义热点区域的形状及超链接，它有三个相应的属性：
1.shape属性，控件划分区域的形状，其取值有3个，分别是rect(矩形)，circle（圆形）和poly（多边形）
2.coords属性，控制区域的划分坐标：
 a.如果shape属性取值为rect，那么coords的设置值分别为矩形的左上角x、y坐标点和右下角x、y坐标点，单位为像素
 b.如果shape属性取值为circle，那么coords的设置值分别为圆形圆心x、y坐标点和半径值，单位为像素
 c.如果shape属性取值为poly，那么coords的设置值分别为多边形各个点的x、y坐标点，单位为像素
3.href属性是为区域设置超链接的目标，设置值为“#”时，表示为空链接