HTML宝典(第 1 版)
2.4.2 map元素
阅读(

HTML基础

HTML元素

结构语义元素

内容分组元素

文本语义元素

链接元素

a元素

map元素

使用 map元素,可以定义一个图像映射。图像映射是指把一幅图像划分为多个区域(即热点区域),每个热点区域对应一个超级链接,当用户点击热点区域,会自动跳转到预先设定好的链接地址。

创建一个图像映射,需要 img、map、area 三种标签配合完成:

首先,使用 img 元素定义一幅图像,并通过 src 属性定义图像的URL,通过 usemap 属性定义要选择的图像映射名称,以建立图像与图像映射之间的关联。

其次,使用 map元素定义图像映射,并通过 area 子元素将图像映射划分为多个热点区域。一个 map元素可以包含多个 area 子元素,表示定义多少个热点区域。

<map>标签非常简单,只需声明 id 和 name 属性即可,因为不同浏览器识别的属性可能不同。因此,id 和 name 二者缺一不可,并使用相同的属性值。

<area>标签中,通过 shape 属性定义热点区域的形状,取值 rect | circle | poly,rect 表示矩形,circle 表示圆形,poly 表示多边形;通过 coords属性定义热点区域的坐标,每个点的坐标参考点为图像的左上角顶点;通过 href 属性定义链接的目标URL;通过 target 属性定义在何处打开 href 属性指定的目标 URL。

当 shape 属性取不同值时,coords属性值的格式及含义见表 2‑2:

表 2‑2 不同形状的坐标格式及含义
shape coords 描述
rect x1, y1, x2, y2 热点区域的形状为矩形,矩形的左上角顶点坐标为(x1, y1),右下角顶点坐标为(x2, y2)
circle x, y, r 热点区域的形状为圆形,圆心坐标为(x1,y1),半径为r
poly x1, y1, x2, y2, .. 热点区域的形状为多边形,各顶点坐标依次为(x1, y1)、(x2, y2)…,如果第一个坐标和最后一个坐标不一致,为了关闭多边形,浏览器必须添加最后一对坐标

假设有一幅图像,其中包含一个矩形、一个圆形、一个三角形,希望使用该图像创建一个图像映射。如图 2‑46 所示:

图像映射
图2-46 图像映射

在上述图像上创建图像映射的代码如下:

<img src="shapes.png" usemap="#shapes">
<map name="shapes">
  <area shape="rect" coords="50, 50, 100,100"> <! -- The hole in the red box -->
  <area shape="rect" coords="25, 25,125,125" href="red.html">
  <area shape="circle" coords="200, 75, 50" href="green.html">
  <area shape="poly" coords="325, 25,262,125,388,125" href="blue.html">
</map>

上述代码中,img 元素的usemap属性值(不包括 '#'),必须与 map元素的 name 属性值相同,才能实现图像与映射之间的关联。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验