图像映射：单击以在屏幕上回显/打印文本

Posted 2023-05-08

【中文标题】图像映射：单击以在屏幕上回显/打印文本

【英文标题】：Image Map: Click to echo/print text on screen

【发布时间】：2010-11-27 07:32:58

【问题描述】：

是否可以单击图像映射的一部分并打印出一些文本，无论是页面某处<area> 标记的alt 或title 值吗？

我可以通过 jQuery 做到这一点吗？我已经看过并且我正在努力这样做（对jQuery非常生疏，并且是一个新手）。我玩过一些代码，但我设法得到的只是静态数据。

谢谢。

编辑：这是一张包含 30 个大小和形状各异的可点击“区域”的大图。

【参考方案1】：

html：

<map name="Map" id="Map">
  <area shape="rect" coords="32,36,222,109" href="#"  />
  <area shape="rect" coords="246,45,420,110" href="#"  />
  <area shape="rect" coords="456,45,585,111" href="#" />
  <area shape="rect" coords="627,44,768,118" href="#" />
</map>

jQuery:

<script type="text/javascript">
 $(function()
  $('map area').click(function()
   alert($(this).attr('alt'));
  );
 );
</script>

【讨论】：

问题是我有一张带有 30 个“点击”选项的大图像 - 将其切割成 30 多张会很痛苦。