Modal中的图像映射

Question

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

Answer 1

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