javascript - 在 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()测试功能:

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

<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>

至于<area>及其属性，HTML4 需要 alt和 href要设置(或者 nohref 属性)。

在 HTML5 中，href是可选的，alt仅当 href 时才需要被使用。

作为 <area>没有 href不被视为常规链接，当您将鼠标悬停在这些区域时，浏览器不会显示鼠标变为指针。可以使用 CSS 更改此行为:area { cursor: pointer } .

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

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

area {
  cursor: pointer;
}

<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')"> 
</map>