JavaScript-图片地图

JavaScript-图片地图（Image map）是使用一个图片作为容器的网页，通过给图片上不同的区域定义超链接，从而使得点击图片上的不同区域可以跳转到不同的页面或执行不同的操作。

创建图片地图

要创建一张图片地图，需要两部分内容：

• 一张基础图片
• 区域坐标信息

将这两部分内容组合在一起，就可以创建一张图片地图。

基础图片

基础图片是要作为容器的图片，可以是 JPG、PNG 或 GIF 格式。在 HTML 中，可以使用 <img> 标签来引入基础图片：

<img src="example.jpg" alt="Example">

区域坐标信息

除了基础图片，还需要为图片定义区域坐标信息，即哪些区域可以成为可点击的链接。区域坐标信息有两种类型：矩形和多边形。

矩形坐标

使用矩形坐标定义一个矩形区域。坐标格式为 x1,y1,x2,y2，表示从左上角 (x1, y1) 到右下角 (x2, y2) 组成的矩形区域。

<area shape="rect" coords="10,10,100,100" href="page.html">

多边形坐标

使用多边形坐标定义一个多边形区域。坐标格式为 x1,y1,x2,y2,...,xn,yn，表示按照给定的点顺序组成的多边形。

<area shape="poly" coords="10,10,50,50,20,100" href="page.html">

组合

将基础图片和区域坐标信息组合在一起，就能创建一张图片地图了。

<img src="example.jpg" alt="Example" usemap="#example">
<map name="example">
  <area shape="rect" coords="10,10,100,100" href="page1.html">
  <area shape="poly" coords="10,10,50,50,20,100" href="page2.html">
</map>

JavaScript 操作图片地图

要在 JavaScript 中操作图片地图，需要拿到图片和区域的 DOM 元素。可以通过 document.images 和 document.areas 这两个属性拿到相应的 DOM 元素。

const image = document.images[0];
const areas = document.areas;

拿到 DOM 元素之后，就可以修改图片和区域的属性了。例如，将第一个区域的链接修改为 page3.html：

areas[0].href = "page3.html";

结语

图片地图可以很好地将图片和链接结合在一起，实现各种有趣的效果。同时，JavaScript 可以很方便地操作图片地图，实现更加高级的交互效果。