在前端开发中，很多时候我们需要对图片进行交互操作，这时候就需要用到图片热区。而要实现图片热区，我们需要用到一个叫做 usemap 的标签属性。为了方便使用，我们可以通过 npm 包使用 usemap。在本文中，我将为大家介绍 npm 包 usemap 的使用教程。
安装 usemap
要使用 npm 包 usemap，我们首先需要安装它。在命令行中执行以下命令即可安装 usemap：
npm install usemap --save
使用 usemap
安装完 usemap 后，我们就可以在项目中引入它：
import usemap from 'usemap';
或者在 HTML 页面中使用 script 标签引入：
<script src="https://unpkg.com/usemap/dist/usemap.min.js"></script>
引入 usemap 后，我们可以通过以下方式初始化一个图片热区：
const areas = [
{ coords: [10, 10, 100, 100], href: 'https://www.baidu.com/' },
{ coords: [100, 100, 200, 200], href: 'https://www.google.com/' }
];
usemap(document.querySelector('img'), 'exampleMap', areas);上述代码中，通过传入一个包含多个区域信息的数组来初始化了一个图片热区，其中每个区域包括 coords 和 href 两个属性。coords 是一个数组，包含四个值，分别为左上角的 x 和 y 坐标，右下角的 x 和 y 坐标。href 是这个区域的链接地址。最后一个参数 exampleMap 是图片热区的名称，我们可以根据该名称来引用这个图片热区。
使用图片热区
初始化完图片热区后，我们就可以在页面中使用它了。在 HTML 中，我们可以通过以下方式引用图片热区：
<img src="example.png" usemap="#exampleMap">
在上述代码中，我们通过 usemap 属性将图片热区与图片绑定在一起。
当用户点击图片热区时，浏览器将会自动跳转到该区域所对应的链接地址。
示例代码
下面是一个完整的使用 usemap 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- --------------
-------
------
------ -----------
---- ----------------- ---------------------
------- -----------------------------------------------------------
--------
----- ----- - -
- ------- ---- --- ---- ----- ----- ------------------------ --
- ------- ----- ---- ---- ----- ----- ------------------------- -
--
------------------------------------- ------------- -------
---------
-------
-------总结
通过本文的介绍，我们了解了如何通过 npm 包 usemap 来实现图片热区。要使用 usemap，我们首先需要安装它。安装完毕后，我们可以通过传入一个包含多个区域信息的数组来初始化一个图片热区。初始化完毕后，我们可以在 HTML 中来使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822dfc