您可以将图像映射放在图像映射中吗？（JavaScript）？答案

【问题标题】：Can you put an image map within an image map? (JavaScript)?您可以将图像映射放在图像映射中吗？（JavaScript）？
【发布时间】：2016-06-30 02:47:45
【问题描述】：

例如，通过单击图像 1 中的某些像素，会出现图像 2。现在，如何单击图像 2 中的某些像素以使图像 3 出现？看来我只能为已经存在的图像提供一张地图......

【问题讨论】：

您有任何示例代码来展示您已经尝试过的内容吗？
是的，链接在这里：textuploader.com/53bpl

标签： javascript html imagemap

【解决方案1】：

你不能在另一个地图中嵌入地图，它只能使用区域。

但是，如果您希望这样做，您可以使用链接将容器替换为另一张地图。这是更新后的代码，关键是用下一个地图替换当前地图的函数：

document.getElementById('topImageMap').setAttribute("usemap","Presets");

然后很容易添加另一个元素和功能，带您回到上一个或“家”地图。

<!DOCTYPE html>
<html>
<body>
<img id="LivePreview"
src="http://i.imgur.com/p5LwjWA.png">
<br></br>

<img id="topImageMap"
src="http://i.imgur.com/vU7VZ4V.png" usemap="Patterns">

<img id="WhiteSpace"
src=http://i.imgur.com/jf7wt2j.png>

<map name="Patterns">

  <area alt="PresetsButton" coords="18,21,94,80" onclick="changeContainer()" shape="rect" usemap="Presets"></area>

  <area alt="RandomButton" coords="200,21,297,83" onclick="document.getElementById('WhiteSpace').src='http://i.imgur.com/Raypdtk.png'" shape="rect"></area>

</map>


<map name="Presets">

  <area alt="PuffnairbeadButton" coords="58,26,153,95" onclick="document.getElementById('LivePreview').src='http://i.imgur.com/DjbAdnh.png'" shape="rect"></area>

</map>

<script>
  function changeContainer(){
   document.getElementById('topImageMap').setAttribute("usemap","Presets");
document.getElementById('topImageMap').src='http://i.imgur.com/wyQMR51.png'
    }
</script>
</body>
</html>

【讨论】：