模态内的图像映射答案

【问题标题】：Image Map within Modal模态内的图像映射
【发布时间】：2015-04-03 04:14:20
【问题描述】：

不使用 Bootstrap，只使用自定义类来使模式工作。我可以在模态中获取图像并添加了 usemap="#MapSys" ，这在 map 标记中是相同的。地图标签包含坐标。但是图像映射不起作用并且热点未激活。由于它使用自定义类，我无法在 jsfiddle 上发布。

<div id="targeted-rna-expression-div"><p><a class="modalLink[820,300]" href="/content/dam/illumina-marketing/images/applications/sequencing/amplicon-workflow-solution-lg.jpg?iframe" title="TruSeq Targeted RNA Expression Workflow" usemap="#MapSys"><span class="sequencing-rna-targeted_rna_expression"><img alt="TruSeq Targeted RNA Expression Workflow" class="roundRect left" src="/content/dam/illumina-marketing/images/applications/sequencing/amplicon-workflow-solution.jpg"></span></a><a class="modalLink[820,300]" href="/content/dam/illumina-marketing/images/applications/sequencing/amplicon-workflow-solution-lg.jpg?iframe" title="TruSeq Targeted RNA Expression Workflow" usemap="#MapSys">
  <map name="MapSys">
    <area shape="rect" coords="66,233,204,261" href="http://www.illumina.com/informatics/research/experimental-design/designstudio.html" target="_blank">
  </map>
<br>
View the workflow »</a></p>
</div>

【问题讨论】：

标签： html iframe modal-dialog imagemap

【解决方案1】：

我看到了几个问题。 usemap 是属于 img 标签（而不是锚标签）的属性。此外，请确保页面上只有 map name="MapSys" 和 usemap="#MapSys" 的单个实例。我会将地图元素放在 img 标签之后，并且在该地图标签周围没有额外的锚点。

【讨论】：

只有一个 img 标签，这就是您单击以打开模式的标签。这不是带有地图的图像，因此它不属于那里。是的，我知道使用地图必须是独一无二的。
我在你的 usemap="#MapSys" 示例代码中看到了两个实例，它们都在锚标签中，而不是 img。您应该包含模态弹出代码（和一个可点击的示例），其中带有 usemap="#MapSys" 和相邻地图名称="MapSys" 代码的 img 应该并排存在。
我将 usemap="MapSys" 移动到您单击以打开模式的图像（这对我来说没有意义，图像映射在较大的图像上）但没有成功。如果我找到解决方案，我会四处询问，我会告诉你的。
不，将 usemap="MapSys" 移动到您想要应用地图的图像。
我原来是这样的:(