使用 HTML 中的图像映射执行 javascript 函数

Question

当我在我的 cshtml 页面中单击图像的某个部分时，我想执行一些 javascript 函数。但是，可点击区域不会出现。

我也不想引用 www.google.com，但它要求我具有 alt 和 href 属性。

为什么我的代码不起作用？

这是我的代码：

<image src="~/Content/Images/PeriodicTable2.jpg" width="900" height="450" alt="Sample Image" />

<map name="PeriodicTable">
   <area shape="rect" coords="0,0,200,200" onclick="Popup('Hydrogen')" href="https://www.google.com" alt="something"> 
</map>

Answer 1

您必须设置usemap属性：

<img src="..." usemap="#PeriodicTable">

请参阅以下示例，其中我添加了一个虚拟Popup()函数进行测试：

<img src="..." usemap="#PeriodicTable">

function Popup(text) {
  console.log(text)
}

对于<area>和它的属性，HTML4既需要alt和href要被设置（替换地，nohref属性）。

在 HTML5 中，href是可选的，alt只有在href使用时才需要。

由于<area>不带 ahref不被视为常规链接，因此当您将鼠标悬停在区域时，浏览器不会显示鼠标更改为指针。这种行为可以使用CSS来改变：area { cursor: pointer }。

这意味着下面的示例应该与第一个非常相似，但没有href和alt属性。

<img src="https://via.placeholder.com/600x200" usemap="#PeriodicTable" width="600" height="200" alt="Sample Image">

<map name="PeriodicTable">
  <area shape="rect" coords="0,0,200,200" onclick="Popup('Hydrogen')" href="#" alt="something"> 
</map>

function Popup(text) {
  console.log(text)
}

area {
  cursor: pointer;
}