HTML map元素

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用户指南》，并全部在 GitHub 上开源。

HTML map元素相关推荐

c++ map初始化_Go学习每日一问(18)-map元素查找
每次学习并整理一个Golang的知识点,每天进步一点点.今天学习下go中的一个知识点:map元素查找日省吾身 1.下面代码中 A B 两处应该怎么修改才能顺利编译? func main() { va ...
Java 遍历Map元素并移除符合条件元素
在Java中,如果遍历Map并移除单中的元素,如果使用的是非迭代器模式,非提示ConcurrentModificationException 异常. 实例代码:正确遍历Map元素和移除Map 元素方法 ...
文章目录图片元素 img元素显示图片的两种写法： alt 属性与a元素连用 map元素和figure元素 figcaption 联用
文章目录图片元素 img元素显示图片的两种写法: alt 属性与a元素连用 map元素和figure元素 figcaption 联用图片元素 img元素 image 缩写,空元素 src属性 ...
JAVA 取出Map元素值的三种方法
JAVA 取出Map元素值的三种方法: (1)方法一: 通过Map的keySet()方法获取key 的set ,迭代set元素(每个元素调再用Map的get()方法); (2)方法二 : 通过Map ...
JAVA遍历map元素
第一种: Java代码 Map map = new HashMap(); Iterator iter = map.entrySet().iterator(); while (iter.hasNex ...
java map 元素个数_Java 小模块之--统计字符串中元素个数
Java 小模块之--统计字符串中元素个数曾经看过我Stream或者Guava类库等文章的小伙伴应该很明白我这篇博文的意义所在了一是给读者提供综合的博文入口二是自己也总结一下思路 ps: 之前没 ...
c++循环删除map元素
写c++循环删除map,list等元素时,需要注意的细节: // 这里的调用是在同一个线程里的,所以这里不用考虑互斥处理.tagRtspData* item = NULL;map<SSocket ...
java动态删除map元素报错_java map使用迭代器遍历时执行删除元素报空指针异常
我建立了两个Map,其流程是遍历两个map,将map1中value值与map2中相同,但是K值不同的数据查找出来.然后把这条数据从Map2中删除.我使用迭代器在执行移除的时候是报空指针(java.la ...
java8 list map 排序_java8如何对list中的map元素根据多个key值进行排序
使用JAVA自己的排序方法,有的时候是一个可行的选择. 先从简单的开始说起. 一.少数key的情况有一个需求:根据 menu_level,sort排序,越小的越前面. -- 下面代码按照升序规则进行 ...

HTML map元素

map元素

HTML map元素相关推荐

最新文章

热门文章