html5嵌入内容_动力节点Java学院整理

客户端分区响应图

客户端分区响应图支持用户通过点击某张图的不同区域让浏览器导航到不同的URL上，我们需要使用元素来定义图像上的各个区域以及他们所代表的行为，需要用到的元素包括map元素和area元素。

map元素

map元素的作用是定义一个客户端图像映射，map元素中包含一个或者area元素，他们各自代表了图像上可被点击的一块区域。map元素通常包含属性：

1）id：必须，为map标签定义唯一的标识；

2）name：可选，名称。

area元素

area元素定义图像映射中的区域，该元素总是嵌套在map元素中。area元素的属性分为两类，第一类处理的是area所代表的图像区域被用户点击后浏览器会导航到的URL：

1）href：此区域被点击后浏览器应该加载的URL；

2）alt：替代内容，同img元素的对应属性；

3）target：显示URL的浏览上下文，同base元素的对应属性；

4）rel：描述当前文档和目标文档的关系，同link元素的对应属性；

5）media：媒介，同style元素的对应属性；

6）hreflang：目标文档的语言；

7）type：目标文档的MIME类型。

第二类包含了属性：shape和coords属性，用来标明用户可以点击的各个图像区域。shape属性的取值如下：

1）rect：代表了一个矩形区域。对应的coords属性必须由四个用逗号分隔的整数组成(a,b,c,d)：a代表图像的左边缘与矩形的左侧；b代表图像的上边缘与矩形的上侧；c代表图像的右边与矩形的右侧；d代表图像的下边缘与矩形的下侧；

2）circle：代表了一个圆形区域。coords属性必须由三个用逗号分隔的整数组成(a,b,c)：a代表从图像左边缘到圆心的距离；b代表从图像上边缘到圆心的距离；c代表圆的半径；

3）poly：代表了一个多边形。coords属性必须至少包含六个用逗号分隔的整数，每一对数字各代表多边形的一个顶点；

4）default：默认区域，即覆盖整张图片。不需要提供coords值。

下面是一个例子：

上面的脚本定义了用户如果点击图片的游泳部分，浏览器导航至swimpage.html，如果用户点击图像上的骑车部分，浏览器则会导航至cyclepage.html，点击其它部分则导航至otherpage.html。