js图片 area 颜色_1个图片、2个步骤、3种形状，轻松实现html页面的地图或菜单导航...

地图或菜单导航是html页面中很常见的开发任务。本文仅需使用html标签，无需定义任何样式，即可轻松实现html页面的功能导航功能！

1个图片

现以“江苏省地图”为例，假如它的文件名称为jiangsu.jpg，且放在了当前页面文件所在目录的images中，就可以在页面中先使用img标签引用它：

2个步骤

如果要给这个图片中的每个城市加上导航功能，就需要2个步骤。

第1步：给图片加上usemap属性，用于指定具体的map元素。例如：

第2步，添加name属性值为city的map元素。例如：

3种形状

这里是最关键的！因为需要在map标签元素中添加每个城市点击时的具体坐标(coords)，而点击时的形状(shape)可以有3种类型：

• 矩形(rect)：需同时指定左上角及右下角坐标；
• 圆形(circle)：需同时指定圆心坐标及半径长度；
• 多边形(poly)：需同时指定至少3个点的坐标位置，才能生成多边形。

问题是，如何确定每个城市的坐标位置呢？这里教大家一个非常简单的办法：只要使用Windows自带的画图软件就可以。例如，要获取“南京”的左上角坐标，先使用画图软件打开图片，将鼠标放到需要点击的左上角位置(变为十字符号)，此时软件下方将自动显示该坐标位置。如下图：

由此可见，“南京”的左上角坐标为(239,399)。同样的道理，你也可以将鼠标放到“南京”的右下角，从而获取右下角坐标(284,417)。有了这样两个坐标之后，就可以在map标签元素中添加一个矩形的点击区域了。完整代码如下：

在这个map标签元素中，可以添加很多个area标签，这样也就能同时指定多个其他城市。

area标签属性可以指定跳转地址，也可以执行js代码。上述代码的执行结果如下图：

由于这里给“南京”指定的shape类型为rect，所以，当点击“南京”的时候，其形状显示为矩形，javascript代码正常可以执行。

如果想换成圆形或多边形呢？可按照上面的形状规则及坐标获取方法，自行添加。

关于这些页面开发方面的知识，在这个系列专栏中都会有详细的视频讲解说明：