分区响应图的创建和使用

简述：

1.含义

所谓分区响应图，就是当超链接按钮是图片时，将图片进行划分，使得点击图片不同区域时，会有不同的反馈。

比如在下面这幅图中，想要使点击不同的图标，进入不同的页面，就要创建分区响应图。

image.png

示例：

使用此前所述的input button获取像素点坐标来获取区域坐标：

<form action="">
    <input type="image" src="123.jpg" width="400">
</form>

image.png

依次获取 C 图标的左上角，右下角坐标分别为：150，113，193，192
依次获取 /b/ 图标的左上角，右下角坐标分别为：203，112，285，192

此时生成分区响应图的HTML代码如下：

<img src="123.jpg" width="400" usemap="#map1" alt="走丢了">
<map name="map1">
    <area shape="rect" coords="150, 113, 193, 192" href="c.html" target="_blank" alt="">
    <area shape="rect" coords="203, 112, 285, 192" href="b.html" target="_self" alt="">
</map>

当鼠标移至设定区域时，会提示可点击，其他区域无变化：

image.png image.png

点击后触发设定的超链接：

image.png

在这里插入图片描述
标签详解：

usemap：img标签 中的 usemap 属性可引用 map 中的 id 或 name 属性（取决于浏览器），所以应同时向 添加 id 和 name 属性。

map用法

map：常与img标签绑定使用，用于定义图片指定区域的跳转内容。

id 属性：为 map 标签定义唯一的名称。

name 属性：为 map 规定名称。

area 标签 ：area 标签永远嵌套在 map 标签内部。area 可定义图像映射中的区域。

erea用法

alt 属性：规定区域的替代文本。

说明：如果写href属性，则alt属性是必写的

cooreds 属性：定义相关区域的坐标

说明：和shape属性搭配使用

（1）当shape属性为rect时，代表相关区域为矩形，则cooreds属性值为(x1,y1,x2,y2),其中x1,y1为左上角的坐标，x2,y2为右下角的坐标；

（2）当shape属性为circle时，代表相关区域为圆形，则cooreds属性值为(x,y,radius),其中x,y为圆形的中心坐标，radius为圆形的半径；

（3）当shape属性为poly时，代表相关区域为多边形，则cooreds属性值为(x1,y1,x2,y2,x3,y3…xn,yn),规定了多边形各个顶点的坐标，由于浏览器会自动闭合多边形，所以尾部坐标不必与第一个坐标相等。

href 属性：定义了相关区域所连目标

shape 属性：定义了相关区域的形状

属性值：

（1）默认值（default）：规定全部区域

（2）rect：矩形区域

（3）circle：圆形区域

（4）poly：多边形区域

target 属性：定义了在何处打开目标链接

属性值：

（1）_blank:在新窗口打开被链接的文档

（2）_self:默认，在相同框架中打开被链接的文档

（3）_parent:在父框架集中打开被链接的文档

（4）_top：在整个窗口中打开被链接文档

（5）framename:在指定框架中打开被链接文档

学习整理，若有问题请指出。
————————————————
本文转载自csdn
原文链接：https://blog.csdn.net/qq_43968080/article/details/103189082