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

标签 javascript html imagemap

例如,通过单击图像 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/

相关文章:

javascript - JavaScript : replace function not working as expected

javascript - PHP 和 JavaScript 的正则表达式

javascript - 悬停时动画不透明度变化不起作用

javascript - HTML 源链接试图查找文件而不是访问网站

javascript - 如何调用单独文件中的 javascript?

javascript - JavaScript 中的复选框

css - 如何使用伪类:target within an image map

html - Imagemap:点击显示文字

html - 如何在悬停时更改圆形映射图像?

javascript - Google 饼图更改文本对齐方式