首先，让我们看看htmlmap标签是什么：

Htmlmap标签:定义了一个客户端图像映射。图像地图是指具有可点击区域的图像。

定义地图：

mapid='im_map'name='im_map '

areashape='rect'coords='0，0，100，100'href='url.html'/

/map

地图标签定义地图，区域标签定义可点击热点和区域属性；

形状：定义热点形状，可选参数有矩形、圆形和多边形。

坐标：定义形状路径；

当shape=rect时，四个数为：起点X，起点Y，终点X，终点Y。

当形状=圆时，三个数依次为：中心点X，中心点Y，半径

当shape=poligon时，可以定义多个路径点，如下所示：起点x，起点y，路径1X，路径1Y，路径2X，路径2Y.

href定义点击跳转的地址。

htmlmap标记所需的属性：

Id: unique _ name:为地图标记定义的名称。

htmlmap标记的可选属性：

名称：地图名称：为图像地图指定的名称。

HTML中的地图标签结构：

1.坐标对应的坐标不需要改变，只需要改变JS中的比例，OK！

divclass='map_img '

img class=' MapImg ' usemap=' MapName ' src=' is photo/ABC . png ' alt=' ' style=' width :450 px '

mapname='mapName '

！-书写正方形区域-

！- areashape='rect'coords='605，250，660，305 ' target=' _ blank ' href=' JavaScript : alert(1)；'alt=''/-

区域形状='圆形'坐标=' 633，276，28 ' target=' _ blank ' href=' JavaScript : alert '('汽车图标')；'alt=''/

/map

/div

2.如果有多张图片，一张图片对应一张地图，类别不需要改变，只需要改变地图的名称值和对应的usemap值即可。Name=usemap它们是一对CP，不要分开，给它们相同的值。

divclass='map_img '

img class=' MapImg ' usemap=' MapName ' src=' is photo/ABC . png ' alt=' ' style=' width :450 px '

mapname='mapName '

区域形状='圆形'坐标=' 633，276，28 ' target=' _ blank ' href=' JavaScript : alert '('汽车图标')；'alt=''/

/map

！-一张图片对应一个名字和一张地图-

img class=' MapImg ' usemap=' MapName 2 ' src=' is photo/ABC . png ' alt=' ' style=' width :450 px '

mapname='mapName2 '

区域形状='圆形'坐标=' 633，276，28 ' target=' _ blank ' href=' JavaScript : alert '(第二张图片中的汽车图标)；'alt=''/

/map

/div

Htmlmap标签通常用于向图像的某个区域添加超链接！

用法如下：

Imgsrc='行星. gif'alt='无法显示此图像' usemap='#planetmap'/

mapid=' planet map ' name=' planet map '

areashape='rect'coords='0，0，82，126'href='sun.htm'alt='Sun'/

areashape='circle'coords='90，58，3 ' href=' mercur . htm ' alt=' Mercury '/

areashape='circle'coords='124，58，8'href='venus.htm'alt='Venus'/

/map

Usemap属性获取地图标签信息，area标签定义链接区域，shape属性定义区域的形状，coords属性定义链接区域的开始和结束坐标

注意：面积元素总是嵌套在地图元素中。区域元素定义图像映射中的区域。

注意：img中的usemap属性可以引用map中的id或name属性(取决于浏览器)，所以我们应该将id和name属性都添加到map中。

本文转载自中文网站