图像映射热点区域

HTML<map> 元素与 <area> 元素一起使用来定义一个图像映射（一个可点击的链接区域）。这块区域可以是一个超链接，也可以自定义一些点击事件。

通俗点说就是一个图片的某个区域可以创建一些用户交互。 以往的实现可能是覆盖一个DOM元素上去，拦截一些用户交互的事件

0、示例

<map name="test">
  <area shape="rect" coords="0,0,199,189" href="/dom" target="_blank" alt="dom" />
  <area
    shape="rect"
    coords="199,0,398,198"
    href="/cssselector"
    target="_blank"
    alt="cssselector"
  />
</map>

<img usemap="#test" src="./parrots.jpg" alt="两只鹦鹉的照片， 大小为 398 X 189" />

单击左侧的鹦鹉访问 dom 页面，单击右侧的鹦鹉访问 CSS 页面。

上面的map就是把img分成了两个区域，点击左右的部分， 分别跳转到不同的链接

1、<map>标签

属性

1. name

   name 属性给予该映射引用的名称，这个属性必须存在，值不得为空并且不能带空格。name 属性的值不得与同文档中其他 <map> 元素的该属性值相同，如果还指定了 id 属性，则两个属性的值必须相同。

2、<area>标签

<area>元素 在图片上定义一个热点区域，可以关联一个超链接。<area>元素仅在<map>元素内部使用。

关键属性

1. shape

   相关联的热点的形状。HTML 5 和 HTML 4 的规范定义了值 【rect】，它定义了一个矩形区域;圆圈【circle】，它定义了一个圆形区域;多边形【poly】，它定义了一个多边形;默认情况下，这表示整个区域超出了任何定义的形状。许多浏览器，特别是 Internet Explorer 4 和更高版本，支持弧形、多边形和矩形作为形状的有效值;这些值{ { Non-standard_inline } }。

2. coords

   给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的形状属性。对于矩形或长方形，这个 coords 值为两个 X,Y 对：左上、右下。对于圆形，这个值是 x,y,r，这里的 x,y 是一对确定圆的中心的坐标而 r 则表示的是半径值。对于多边和多边形，这个值是用 x,y 对表示的多边形的每一个点：x1,y1,x2,y2,x3,y3 等等。HTML4 里，值可能是像素数量或者百分比，区别是不是有 % 出现; HTML5 里，只可能是像素的数量。

3. alt

   在未显示图像的浏览器上显示代替的文本字符串。这个文本应该能传达给用户与显示图像而没有文本的情况下同等的选择（译者注：就是字和图片表达一个意思）。在 HTML4 中，这个属性时必需的，但是可以是一个空的串 ("")。在 HTML5 中，这个属性只有在href 属性被使用的时候才是必需的。

4. href

   area 的超链接，值为一个 URL. HTML4 里，这个值不管是不是有值都要明确指定出来。HTML5 里则不需要。

5. media

   指明链接资源的媒体类型，例：print and screen。如果此属性省略，默认全部。仅在 href 属性存在情况下使用。

6. target

   本属性指明了在什么地方显示链接的资源。HTML4 里，这个值是一个 frame 的链接或者关键字。HTML5 里，它是一个浏览器上下文 (比如：标签，窗口或者内嵌的 frame) 的链接或者关键字。值的含义：

   • _self: 在当前区域加载链接指向的资源。这个是默认值。
   • _blank: 在新的未命名的窗口或者 tab 里加载超链接资源。
   • _parent: 在父级加载超链接资源。HTML4 里，是当前 frame 的父级，HTML5 里是当前的浏览器上下文，如果当前环境没有父级，行为和_self一样。
   • _top: HTML4 里：将响应加载到完整的原始窗口中，取消所有其他帧。在 HTML5 中：将响应加载到顶级浏览上下文 (也就是说，浏览上下文是当前版本的祖先，并且没有父类)。如果没有父类，这个选项的行为方式与 self 相同本属性只能在指明 href 属性之后使用。

7. type

   该属性指定了用于链接目标的 MIME 类型的媒体类型。一般来说，这是严格的咨询信息;然而，在未来，浏览器可能会为多媒体类型添加一个小图标。例如，当类型设置为音频/wav 时，浏览器可能会添加一个小的扬声器图标

TIP

可以通过设置area标签的cursor属性修改鼠标样式，但是一些背景色之类的是无效的

3、图片的尺寸影响

设置<img>元素的width、height显示尺寸，会对<area>设置coords属性有一定的影响。比如下面的例子

<map name="test">
  <area
    shape="rect"
    id="test2"
    coords="0,0,100,100"
    href=""
    nohref
    target="_blank"
    alt="test"
  />
</map>
<img usemap="#test" src="./12.png" alt="" width="200" height="100" id="img" />

图片的尺寸是200x100。那么area的coords属性也是参考的图片的显示尺寸， 而不是根据图片的原始尺寸来。

4、自定义area元素的交互

可以通过js获取area元素，添加自定义的click等事件。记住需要preventDefault，否则可能触发img元素的默认点击效果，比如预览或者打开新的标签

<map name="test">
  <area
    shape="rect"
    id="test2"
    coords="0,0,100,100"
    href=""
    nohref
    target="_blank"
    alt="test"
  />
</map>
<img usemap="#test" src="./12.png" alt="" width="200" id="img" />
<script>
  const test2 = document.querySelector('#test2');
  test2.addEventListener('click', e => {
    e.stopPropagation();
    e.preventDefault();
    console.log('do something');
  });
</script>