How to Create an Image Map that Opens a Node

  • Updated

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, 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.

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request