地图或菜单导航是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自带的画图软件就可以。例如,要获取“南京”的左上角坐标,先使用画图软件打开图片,将鼠标放到需要点击的左上角位置(变为十字符号),此时软件下方将自动显示该坐标位置。如下图:
![ddea247f982f336aade7bd01540f62b7.png](https://i-blog.csdnimg.cn/blog_migrate/b0cf2fef76c20783cb4091db65606b6d.jpeg)
由此可见,“南京”的左上角坐标为(239,399)。同样的道理,你也可以将鼠标放到“南京”的右下角,从而获取右下角坐标(284,417)。有了这样两个坐标之后,就可以在map标签元素中添加一个矩形的点击区域了。完整代码如下:
![0202191b090ef2184a5415bdc8caa34d.png](https://i-blog.csdnimg.cn/blog_migrate/961246876ee9463a7030edc64bd5f226.jpeg)
在这个map标签元素中,可以添加很多个area标签,这样也就能同时指定多个其他城市。
area标签属性可以指定跳转地址,也可以执行js代码。上述代码的执行结果如下图:
![f50bdf8738508e1182d22ddefd1d887b.png](https://i-blog.csdnimg.cn/blog_migrate/b87db349eac0270a4a36225f8ba2ced9.jpeg)
由于这里给“南京”指定的shape类型为rect,所以,当点击“南京”的时候,其形状显示为矩形,javascript代码正常可以执行。
如果想换成圆形或多边形呢?可按照上面的形状规则及坐标获取方法,自行添加。
关于这些页面开发方面的知识,在这个系列专栏中都会有详细的视频讲解说明: