Javascript 如何根据用户单击图像的不同部分在DIV字段中加载不同的HTML（文本）？

请原谅我的标题措辞拙劣，但我不知道如何用科技术语来表达我的意图

基本上，页面上将有一个图像，当用户单击图像的某个部分时，特定于用户单击区域的信息将显示在图像旁边的“状态”（prolly div container right？）中。我能引用的最接近的东西是SeatGuru的这个链接（）。当用户将鼠标悬停在某个座椅上时，将显示一个工具提示，其中包含有关所悬停座椅的信息。我正在尝试构建相同的功能，但操作将是单击而不是悬停，并且不是在工具提示中显示信息，我希望它显示在图像旁边的“状态”区域中，并在每次单击新“座椅”时刷新。我在SeatGuru上查看了源代码，看到了jQuery引用，这就是我应该如何实现它的方法吗

不知道这是否重要，但它正用于Django（python）站点

---

TIA。

您可以使用HTML图像地图在图像中定义可单击区域：

---

另一种选择是使用SVG图像和超链接

您还可以轻松使用图像地图创建器，从而避免了此处的大量工作；） 例如：

---

你可以试试图像地图：如果你想让内容动态化，jquery是你的朋友，是的！使用

可以根据具有不同“敏感”坐标的图像插入指向其他目标的链接。但是你可以使用map来拥有不同的敏感部分，并让jquery在点击一个敏感部分时对其作出反应。我认为使用jquery对其作出反应将是我正在尝试的，点击后显示的文本将来自数据库。分解这个问题：1。确定单击的内容。2.根据单击的内容查询数据库。3.将查询结果返回到页面。你有一个例子或链接可以给我指吗？我喜欢这个，但是我怎么能根据用户点击的区域来查询API呢？href或target字段中的ajax/javascript调用？在这里，您只需上传图像-->单击图像上的accept鼠标左键即可定义rect。在此之后，您可以使用下面的嵌入代码并添加所需的href。为了查询点击量，我会尝试为每个区域提供一个Id或类，并使用JSF跟踪点击量。我如何绑定javascript/ajax API调用？

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>