例如,通过单击图像 1 中的某些像素,会出现图像 2。现在,如何单击图像 2 中的某些像素来显示图像 3?似乎我只能为已经存在的图像制作一张 map ...
最佳答案
您不能将 map 嵌入到另一张 map 中,它只能使用区域。
但是,如果您希望这样做,您可以使用链接将容器替换为另一张 map 。这是更新后的代码,关键部分是用下一张 map 替换当前 map 的函数:
document.getElementById('topImageMap').setAttribute("usemap","Presets");
然后很容易添加另一个元素和功能,将您带回到以前的或“主页” map 。
<!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>
关于javascript - 你能把图像映射放在图像映射中吗? (JavaScript)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38113156/