JavaScript - 图片映射：初学者指南

你好呀，未来的编程超级巨星！今天，我们将踏上一段激动人心的旅程，探索JavaScript图片映射的世界。别担心如果你之前从未写过一行代码——我将作为你的友好向导，我们会一步步来。在本教程结束时，你将能够像一个专业人士一样创建交互式图片！

JavaScript - Image Map

图片映射是什么？

在我们深入JavaScript部分之前，先来了解一下图片映射是什么。想象你有一张披萨的图片，你希望当有人点击不同的配料时，会发生不同的事情。这正是图片映射所做的——它使得图片的特定区域可点击！

HTML入门

要创建图片映射，我们从一些基本的HTML开始。别担心；这听起来比实际要简单！

<img src="pizza.jpg" alt="美味的披萨" usemap="#pizzamap">

<map name="pizzamap">
<area shape="circle" coords="100,100,50" href="#cheese" alt="奶酪">
<area shape="rect" coords="200,50,300,150" href="#pepperoni" alt="意大利香肠">
</map>

让我们分解一下：

我们有一个<img>标签来显示我们的披萨图片。
usemap属性将图片与我们的地图连接起来。
在<map>标签内，我们使用<area>标签定义可点击的区域。
每个<area>都有一个形状（圆形或矩形）、坐标和链接。

使用JavaScript增强功能

现在，让我们添加一些JavaScript魔法，使我们的图片映射更具交互性！

步骤1：选择元素

首先，我们需要使用JavaScript获取我们的元素：

const img = document.querySelector('img[usemap]');
const areas = document.querySelectorAll('area');

这段代码找到了我们的图片和我们定义的所有可点击区域。

步骤2：添加点击事件

现在，让我们在点击区域时触发一些动作：

areas.forEach(area => {
area.addEventListener('click', function(event) {
event.preventDefault();
alert('你点击了 ' + this.alt);
});
});

这段代码为每个区域添加了一个点击事件。当点击时，它会显示一个包含配料名称的警告框。

步骤3：高亮显示区域

让我们来点视觉效果！当鼠标悬停时，我们会高亮显示区域：

function createOverlay(area) {
const overlay = document.createElement('div');
const coords = area.coords.split(',');

overlay.style.position = 'absolute';
overlay.style.left = coords[0] + 'px';
overlay.style.top = coords[1] + 'px';

if (area.shape === 'circle') {
overlay.style.width = coords[2] * 2 + 'px';
overlay.style.height = coords[2] * 2 + 'px';
overlay.style.borderRadius = '50%';
} else {
overlay.style.width = coords[2] - coords[0] + 'px';
overlay.style.height = coords[3] - coords[1] + 'px';
}

overlay.style.backgroundColor = 'rgba(255, 255, 0, 0.3)';
overlay.style.display = 'none';

document.body.appendChild(overlay);
return overlay;
}

areas.forEach(area => {
const overlay = createOverlay(area);

area.addEventListener('mouseover', () => overlay.style.display = 'block');
area.addEventListener('mouseout', () => overlay.style.display = 'none');
});

这段代码为每个区域创建了一个半透明的覆盖层，并在鼠标悬停/移出时显示/隐藏它。

一切就绪

这是我们完整的JavaScript代码：

const img = document.querySelector('img[usemap]');
const areas = document.querySelectorAll('area');

areas.forEach(area => {
area.addEventListener('click', function(event) {
event.preventDefault();
alert('你点击了 ' + this.alt);
});

const overlay = createOverlay(area);

area.addEventListener('mouseover', () => overlay.style.display = 'block');
area.addEventListener('mouseout', () => overlay.style.display = 'none');
});

function createOverlay(area) {
const overlay = document.createElement('div');
const coords = area.coords.split(',');

overlay.style.position = 'absolute';
overlay.style.left = coords[0] + 'px';
overlay.style.top = coords[1] + 'px';

if (area.shape === 'circle') {
overlay.style.width = coords[2] * 2 + 'px';
overlay.style.height = coords[2] * 2 + 'px';
overlay.style.borderRadius = '50%';
} else {
overlay.style.width = coords[2] - coords[0] + 'px';
overlay.style.height = coords[3] - coords[1] + 'px';
}

overlay.style.backgroundColor = 'rgba(255, 255, 0, 0.3)';
overlay.style.display = 'none';

document.body.appendChild(overlay);
return overlay;
}

结论

恭喜你！你刚刚使用JavaScript创建了一个交互式图片映射。记得我之前说你会像一个专业人士一样创建交互式图片吗？看看你现在的表现！

以下是我们所学内容的快速回顾：

我们从基本的HTML开始，定义了图片和可点击区域。
我们使用JavaScript选择这些元素。
我们为点击事件添加了显示警告的功能。
我们在鼠标悬停时创建了覆盖层高亮显示。

方法表格

以下是我们在JavaScript中使用的主要方法表：

方法	描述
`querySelector()`	选择匹配CSS选择器的第一个元素
`querySelectorAll()`	选择匹配CSS选择器的所有元素
`addEventListener()`	将事件处理程序附加到元素
`preventDefault()`	阻止事件的默认行为
`createElement()`	创建一个新的HTML元素
`appendChild()`	将新的子节点添加到元素

继续练习和尝试这些概念。在你意识到之前，你将能够创建各种交互式网页元素。记住，每个专家都曾是一个初学者。快乐编码！

Credits: Image by storyset