如何在 ImageMap 热点上应用边框和更改边框颜色

我渲染了一幅图像，并提供了定义了图像映射的热点。我还添加了鼠标悬停事件监听器，以便使用 focus() 来突出显示热点。

我希望在加载图像后显示边框，并在用户点击热点时改变边框的颜色。点击功能可通过标签上的事件监听器实现，但要使边框显示出来似乎有点棘手。如果您对此有任何帮助，我们将不胜感激。

代码沙盒

注意： 它不需要完全是边框，它可以是悬停热点时的一些可见变化，一旦选择完成，如果我们能够区分未选择的热点，也是可以的。

代码沙盒

注意： 它不需要完全是边框，它可以是悬停热点时的一些可见变化，一旦选择完成，如果我们能够区分未选择的热点，也是可以的。

好的，我可以帮助更改图像映射中热点的样式，以指示悬停和选择状态。

1. 使用 CSS 为热点添加样式

与其依赖 JavaScript 来添加和删除边框，不如使用 CSS 为不同状态下的热点定义样式。我们可以使用 :hover 和 :focus 伪类来实现这一点。

在的 CSS 中，添加以下内容：

area {
  outline: none; /* 删除默认的焦点轮廓 */
}

area:hover {
  outline: 2px solid blue; /* 悬停时添加蓝色边框 */
}

area:focus {
  outline: 2px solid red; /* 选中（聚焦）时添加红色边框 */
}

这将为所有热点添加默认的 outline: none ，以删除默认焦点轮廓，然后在悬停时应用蓝色边框，在选中（聚焦）时应用红色边框。

2. 通过 JavaScript 切换类

如果希望对热点的样式有更多控制，或者希望在点击后保持选中状态，可以使用 JavaScript 来切换 CSS 类。

首先，在的 CSS 中定义样式：

.hotspot-hover {
  outline: 2px solid blue;
}

.hotspot-selected {
  outline: 2px solid red;
}

然后，修改的 JavaScript 代码以添加和删除这些类：

const hotspots = document.querySelectorAll('area');

hotspots.forEach(hotspot => {
  hotspot.addEventListener('mouseover', () => {
    hotspot.classList.add('hotspot-hover');
  });

  hotspot.addEventListener('mouseout', () => {
    hotspot.classList.remove('hotspot-hover');
  });

  hotspot.addEventListener('focus', () => {
    hotspot.classList.add('hotspot-selected');
  });

  hotspot.addEventListener('blur', () => {
    // 如果希望在点击其他位置后保持选中状态，请删除此监听器。
    hotspot.classList.remove('hotspot-selected');
  });
});

此代码将为每个热点添加事件监听器，以便在悬停时添加 hotspot-hover 类，在取消悬停时删除该类，在选中时添加 hotspot-selected 类，并在失去焦点时删除该类。

其他视觉提示

除了边框，还可以使用其他视觉提示来指示热点状态：

• 背景颜色变化： 在悬停或选中时更改热点的背景颜色。
• 透明度变化： 在悬停或选中时更改热点的透明度。
• 自定义图标： 在悬停或选中时显示自定义图标或图像。

选择最适合的用例和设计偏好的方法。