An image map turns specific areas of an image into a link. In this case, we make that link go to another node of the tree.

The first node of this tree is an image map. Click the buttons on the remote, and the tree will advance to another node relating to that button. Give it a try:

Here's how it works

1. Create a content node and upload your image.
   
   
2. Switch to code view in the node editor and copy the URL of the image:
   
3. Now we need the coordinates of the areas of your image that you'd like to act as buttons that open another node of your tree. There are several online tools that will make this super easy. Like this one, for example, https://www.image-map.net/ Paste the image source URL from step 2 into the image map tool and follow the easy instructions to map out your buttons. Don't bother assigning a URL to buttons. We'll do that later in Zingtree. When finished, the tool will provide you with a snippet of HTML. 
   
   
4. Come on back to your node editor in Zingtree and open code view.
   
   
5. Remove the image that you uploaded earlier. We just needed its URL for step 2. Paste in the HTML from the image map tool. Do not resize the image that appears. This is important. The map was created based on the original size of the image that you referenced. The map will break if you change the dimensions.
   
   
6. Now you want to replace every URL (href=) with this: 

   href="#3" onclick="do_button_click(3, 1, 'title',0, '');"

   Replace the 3, 1 with your "to node number" and "from node number". In this example, this area is going to node 3 from node 1. Also, replace the title with the same title that you used when building the map.

Example:

<p><img src="https://s3.amazonaws.com/zingtree-uploads/images%2F1581537012522-remote.jpg" usemap="#image-map" class="fr-fic fr-dii">
<map name="image-map">
<area target="" alt="lock" title="lock" href="#3" onclick="do_button_click(2, 1, 'lock',0, '');" coords="155,176,252,258" shape="rect">&nbsp;
<area target="" alt="unlock" title="unlock" href="#3" onclick="do_button_click(3, 1, 'unlock',0, '');" coords="293,260,385,172" shape="rect">&nbsp;
<area target="" alt="lights" title="lights" href="#3" onclick="do_button_click(4, 1, 'lights',0, '');" coords="154,323,252,409" shape="rect">&nbsp;
<area target="" alt="trunk" title="trunk" href="#3" onclick="do_button_click(5, 1, 'trunk',0, '');" coords="295,322,387,404" shape="rect">&nbsp;
<area target="" alt="panic" title="panic" href="#3" onclick="do_button_click(6, 1, 'panic',0, '');" coords="222,459,319,544" shape="rect">
</map>
</p>

Important Note: If you will be adding more than one image map to an individual tree, make sure that you give the usemap and map name parameters unique names on each node. Notice in our example above the usemap and map name parameters are "image-map". If we want to add another image map on another node, we should not use "image-map" again. Perhaps use "image-map2" for example.