地图点击省跳转到市_IT兄弟连 HTML5教程 多媒体应用 HTML图像地图

图像地图是带有可点击区域的图像，通常情况下，每个区域是一个相关的超级链接。点击某个区域，就会到达相关的链接，也可以通过图像地图实现图片切换效果。

1 什么是图像地图

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

2 怎么制作

1．首先必须定义出图像上的各个热点区域的形状，位置坐标，及指向的URL地址等信息，这个过程叫做图像热点映射。图像热点映射需要使用标签对进行说明，其中的name属性为该图像热点映射指定了一个名称。

2．图像热点映射中的各个区域用标签说明，标签的格式为：，href部分也可以用nohref替换，表示在该区域单击鼠标无效。标签还可以有一个target属性，用来指明浏览器在哪个窗口或者帧中显示href属性所指向的网页资源。标签的属性及描述如表1所示。

3．定义好了图像热点之后，接着就要在图像标签中增加一个名为usemap的属性设置，usemap属性指定该图像被用作图像地图，其设置值为所使用的图像热点映射名称，格式为：在标签中的name属性设置值前多加一个“#”字符。例如，。

表1 标签的属性及描述

3 实现图像地图

我们为下面的“itxdl.png”图片划分一个地图，利用标签的usemap属性设定图片热点，为图片划分四个区域(左上，右上，左下，右下)，然后给热点设定相应的链接。代码如下：

将上包含上述代码的html文件在浏览器中打开，鼠标移入到图像地图的左上角区域，会在浏览器的左下角位置显示该区域的URL地址“www.itxdl.cn/topleft.html”，点击该区域跳转到该链接。效果如图3所示：

图3 图像地图展示

上述代码表明，我们为”itxdl.png”链接了一个被平分为四个矩形区域的图像热点。上图只是第一区块的展示，同理，第二个区块在图像的右上角，第三区块在图像的左下角，第四区块在图像的右下角。除了为图像热点设为矩形之外，我们也可以将它们设为圆形或多边形，但是每种形状的坐标设定不相同。shape属性的设置说明如表2所示：

表2 shape属性的设置说明