How to make Image Buttons

You can insert images in the content area of your nodes, and be able to click on them to have them behave like buttons. This requires a little HTML coding. Here's how to do it:

First of all, when editing the content area of a node, you'll need to use the code view tool.

 

For Example, a JavaScript call would look something like this:

<a href="#3" onclick="do_button_click(3, 2, 'Kids',0, '0');"><img src="https://s3.amazonaws.com/zingtree-uploads/images%2F1624050471539-kids.jpg"</a>

 

By adding an on_click() handler to the <a href> tag that surrounds the image, it will act like a button.

Reference

Here's how do_button_click() works:

do_button_click(to_node_id, from_node_id, button_text, value, button_data) ;

to_node_id = the node you want to visit next

from_node_id = the node you are currently on

button_text = how the click is labeled in your reports.

value = click score value.  Usually, this can just be set to zero.

button_data = A text value for the variable, instead of the value parameter. Set value=0 if you want to set a text value for the node variable. Otherwise, just leave this as an empty string.

 

Setting Button Click Variables for Image Buttons

You can set button click variables for your image buttons to use. 

If you're using image buttons on a node, you will likely not need action buttons on that node. But you may still want to set a variable and value when clicking the image. Here's how:

  1. Follow the steps above to create your image button. Format the onclick parameters like this:

    (2, 1, 'Yes',0, 'agreed')
    •  In the example above:
      • represents the node you want to visit when the button is clicked
      • 1 represents the node you are currently on
      • 'Yes' represents how the button click is labeled in your reports
      • 'agreed' represents the value of the variable that we will set in the next step.
  2. Click the + Add Action Button button
  3. Enable the Variable to Set on Button Click option
  4. Give the variable a name
  5. Now you can remove the empty button. The button-click variable will remain set.

In our example, when the image button is clicked it will set a variable of 'response' with the value of 'agreed'.

 

Was this article helpful?

3 out of 4 found this helpful

Have more questions? Submit a request

Didn't find what you need?

Our friendly customer support team is here to help

Submit a Request

Looking for help or advice?

Reach out to our knowledgeable community of users.

Zingtree Community