HTML <map> 标签
实例
带有可点击区域的图像映射：
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /> </map>
必需的属性
| 属性 | 值 | 描述 |
|---|---|---|
| id | unique_name | 为 map 标签定义唯一的名称。 |
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| name | mapname | 为 image-map 规定的名称。 |
HTML <area> 标签
实例
带有可点击区域的图像映射：
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /> </map>
必需的属性
| 属性 | 值 | 描述 |
|---|---|---|
| alt | text | 定义此区域的替换文本。 |
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| coords | 坐标值 | 定义可点击区域（对鼠标敏感的区域）的坐标。 |
| href | URL | 定义此区域的目标 URL。 |
| nohref | nohref | 从图像映射排除某个区域。 |
| shape |
| 定义区域的形状。 |
| target |
| 规定在何处打开 href 属性指定的目标 URL。 |
今天用到矩形的映射区域，需要注意的是coords的参数意义
<area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形，左上角顶点坐标为（X1,y1），右下角顶点坐标为（X2,y2）。
坐标可以直接使用qq自带的截图测量。
另外还有其他的形状参数
<area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形，圆心坐标为（X1,y1），半径为r。
<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形，各顶点坐标依次为（X1,y1）、（X2,y2）、（x3,y3） ......。
来自ansion博客
2016年12月20日
