在 HTML5 中的图像上创建按钮答案

【问题标题】：Creating buttons on an image in HTML5在 HTML5 中的图像上创建按钮
【发布时间】：2023-03-29 23:15:01
【问题描述】：

我正在创建一个东南亚地图网站。我希望用户能够在地图上按国家/地区，然后会出现一个弹出框，显示所按国家/地区的信息。

如何使地图上的按钮起作用？我试图在不同的图像中透明化国家并在 HTML 和 CSS 中覆盖它们但是这不起作用

【问题讨论】：

【解决方案1】：

您需要使用图像映射。看看here

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
将此函数作为点击事件添加到每个area元素：function clickArea(evt) { evt.preventDefault(); window.alert(evt.target.alt); }

【解决方案2】：

img 地图区域正是为此而生的。如果您需要在悬停时添加/删除类，例如隐藏/显示国家悬停，您可以将其与 css 和 js 混合使用。

【讨论】：

【解决方案3】：

如上所述，最常用的方法是使用图像映射。但是，如果您想要一个更具交互性的替代方案，您可以使用 jQuery。有许多 jQuery 地图/平面图插件可以优雅地实现这一点。

以下是我通过简单的 Google 搜索找到的一些：

JVectorMap - visit

mapSVG - visit

JQVMAP - visit

我希望这会有所帮助！

【讨论】：

【解决方案4】：

我会尝试用SVG 解决这个问题。

它不仅让您能够定义复杂的形状（还可以从前插画家中导出代码），还可以让您的 UI 更加用户友好（颜色叠加、轮廓等）。

【讨论】：