map标签
定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。
area
元素永远嵌套在map
元素内部。area
元素可定义图像映射中的区域。img
标签中的usemap
属性可引用的map标签中的id
或name
属性(取决于浏览器),所以我们应同时向map
标签添加id
和name
属性。
注释:<img> 标签中的 usemap 属性与 map 元素 name 属性相关联,创建图像与映射之间的联系。
示例
我们想在下面一张图实现九个热点区域,不切图,就使用map
标签。
用ps工具得到以下坐标
步骤:
- 首先必须定义出图像上的各个热点区域的形状,位置坐标,及其指向的URL地址等信息,这个过程叫图像热点映射。图像热点映射需要使用<map name=mapname></map>标签对进行说明,其中的name属性为该图像热点映射指定了一个名称。
- 图像热点映射中的各个区域用<area>标签说明,<area>标签的格式为:<area shape="形状" coords="坐标" href="URL">,href部分也可以用nohref替换,表示在该区域单击鼠标无效。<area>标签还可以有一个target属性,用来指明浏览器在哪个窗口或者帧中显示href属性所指向的网页资源。
- 定义好了图像热点之后,接着就要在<img> 图像标签中增加一个名为usemap的属性设置,usemap属性指定该图像被用作图像地图,其设置值为所使用的图像热点映射名称,格式为:在<map>标签中的name属性设置值前多加一个"#"字符。例如,<img src="china.jpg" usemap="#mymap">
代码实现:
<img src='../../assets/images/animal.jpg' style="width:100%;" usemap="#animalmap">
<map name="animalmap">
<area shape="rect" coords="0,0,90,90" href="http://www.baidu.com" target="_blank" alt="老鼠">
<area shape="rect" coords="90,90,180,0" href="http://www.sina.com" target="_blank" alt="牛">
<area shape="rect" coords="180,0,270,90" href="http://www.163.com" target="_blank" alt="虎">
<area shape="rect" coords="270,90,360,0" href="http://www.qq.com" target="_blank" alt="兔">
</map>
Shape属性的设置说明:
Rect:
定义一个矩形区域,coords属性设置值为左上角、右下角的坐标,各个坐标之间用逗号分开。
Poly:
定义一个多边型区域,coords属性设置值为多边形各个顶点的坐标值。
Circle:
定义一个圆形区域,coords属性设置值为圆心坐标及半径,前两个参数分别为圆心的横、纵坐标,第三个参数为半径。