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

onclick="Popup('Hydrogen')"是一个函数，我想你必须在代码后面加上分号';'。像这样onclick="Popup('Hydrogen');"

Answer 2

您必须设置 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是可选的，只有在使用href时才需要alt。

由于没有 href 的 <area> 不被视为常规 link，当您将鼠标悬停在这些区域时，浏览器不会显示鼠标变为指针。可以使用 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>

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

Executing javascript function with image map in HTML

html

javascript

imagemap