例如,通过单击图像1中的某些像素,将显示图像2。现在,如何单击图像2中的某些像素以显示图像3?看来我只能有一张已有图片的地图...
答案 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>