零基础学HTML5+CSS3---图片热区链接

<area>标记主要用于图像地图，通过该标记可以在图像地图中设定作用区域（又称为热点），这样当用户的鼠标移到指定的作用区域点击时，会自动链接到预先设定好的页面。

图像热区链接的定义方式

1.设置图片

首先需要在图像文件中设置映射图像名。在添加图像的<img>标记中使用usemap属性添加图像要引用的映射图像的名称。

<img src="图像地址" usemap="#映射图像名称">

2.定义热区图像及热区的链接

<map name = "映射图像名称" id = "映射图像名称">
  <area shape="热区形状" coords="热区坐标" href="链接地址" title="标题">
</map>

• 表示设定热点的形状为矩形，左上角顶点坐标为（X1,y1），右下角顶点坐标为（X2,y2）。
• 表示设定热点的形状为圆形，圆心坐标为（X1,y1），半径为r。
• 表示设定热点的形状为多边形，各顶点坐标依次为（X1,y1）、（X2,y2）、（x3,y3）...

示例

   <img src="img/main.jpeg" usemap="#beauty">
   <map name="beauty" id="beauty">
        <area shape="rect" coords="0,0,60,60" href="img/topleft.jpeg" title="美女">
   </map>