html中的图像热点地图

图像地图（图像热点地图）：把一幅图像分成多个区域，每个区域指向不同的URL地址。例如，将一幅中国地图的图像按照省市划分为若干个区域，这些区域就被称为热点，单击热点区域，就可以连接到与相应的省市有关的页面，这就是图像地图。

一张图片默认只能做一个超级链接，但是利用地图热区可以实现一张图片上做多个超链接。

图像地图 是在 img图像标签上的一个应用

rect：定义一个矩形区域，coords属性设置值为左上角、右下角的坐标，各个坐标之间用逗号分开。poly：定义一个多边型区域，coords属性设置值为多边形各个顶点的坐标值。circle：定义一个圆形区域，coords属性设置值为圆心坐标及半径，前两个参数分别为圆心的横、纵坐标，第三个参数为半径。

注意：图像热点地图，最重要的是 借助 firework去找点（你需要的点）

给fly.jpg 图片地图 添加 热区

 <!-- 1.给图的不同区域做热点地图，首先你要有这个图 -->

    <p align="center">

        <img src="./img/fly.jpg" alt="" usemap="#mymap">

        <!-- 2.我在图片上要用地图标签，这个地图标签叫什么，你要对应上 -->

        <map name="mymap">

             <area shape="circle" coords="161,62,34" href="a.html" alt="">

             <area shape="circle" coords="236,63,34" href="b.html" alt="">

             <!-- 1.先把不规则图形，用fw 的多边形切片，绘制出来，例如，我们绘制一个梯形

                 2. 去标注 梯形 4个点的坐标

            -->

             <area shape="poly" coords="137,366,259,366,230,409,167,409" href="c.html" alt="">

        </map>

    </p>

第一个链接位置：

 

第二个位置：

 

第三个不规则图形步骤较多：

 

当点击这三个位置时发生跳转

 

 

对另一幅图进行类似处理也会出现上述效果

   <p align="center">

        <img src="./img/qqline.jpg" alt="" usemap="#mymap1">

        <map name="mymap1"></map>

        <area shape="rect" coords="47,36,209,275" href="a.html" alt="">

        <area shape="rect" coords="271,36,433,275" href="b.html" alt="">

        <area shape="rect" coords="487,36,668,275" href="c.html" alt="">

    </p>