你能把图像映射放在图像映射中吗? (JavaScript的)?

时间:2016-06-30 02:47:45

标签: javascript html imagemap

例如,通过单击图像1中的某些像素,将显示图像2。现在,如何单击图像2中的某些像素以显示图像3?看来我只能有一张已有图片的地图...

1 个答案:

答案 0 :(得分:0)

您无法在另一个地图中嵌入地图,它只能使用区域。

但是,您可以使用链接将容器替换为另一个地图,如果这是您要查找的内容。这是更新的代码,关键部分是用下一个替换当前地图的功能:

的document.getElementById( 'topImageMap')的setAttribute( “USEMAP”, “预置”);

然后很容易添加另一个元素&功能可以将您带回到上一个或“主页”地图。

<!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>