2

For example, by clicking certain pixels in image 1, image 2 appears. Now, how can I click certain pixels in image 2 to make image 3 appear? It seems I can only have one map for images that are already there...

Andrew Eisenberg
  • 28,387
  • 9
  • 92
  • 148
ML STEIN
  • 21
  • 2

1 Answers1

0

You can't embed a map inside another map, it can only use area.

However you can have links to replace the container with another map if that's what you're looking to do. Here's the updated code, with the key piece being the function which replaces the current map with the next one:

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

It would then be easy to add another element & function to take you back to the previous or 'home' 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>
Anders Elmgren
  • 637
  • 5
  • 12