IT兄弟连 HTML5教程 多媒体应用 HTML图像地图

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

1  什么是图像地图

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

2  怎么制作

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

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

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

表1  <area>标签的属性及描述

3  实现图像地图

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

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

图3  图像地图展示

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

表2  shape属性的设置说明