7.3 Creating Clickable Images

A clickable image is an image the user can click on or press to give an answer to something or to select an option. The areas of the image must be mapped by using a graphics tool. You can then in the Zegeba Designer define the actions that happen for each click on the image.

In the illustrations here we will create a clickable image of the warehouse plan below. Based on the room the user selects when filling in the form, only the options relevant to that room will be shown to the user.

Create an image map of your picture

1. Go to image-map.net.
2. Press [Select Image from My PC], find and upload your picture to the site.

3. Start outlining the areas in the picture: In the boxes below the picture, select Shape “Rect” (for rectangle), type Title “A”. Click in two corners of room A and drag the grey marquee by the round grips to the other corners so the whole area A is covered

4. Press the [+ Add New Area] button to get a new input line. In this line, click the Active button, select Shape “poly” (for polygon) and type Title “B”. Click on each corner of room B and adjust the grey marquee if needed so the whole of area B is covered.

Repeat point 4 for the remaining areas. When done, press the button [Show Me the Code!].

5. In the box that appears you will find the mapping coordinates to be inserted into the Zegeba Designer.

Add the clickable image to the form in Designer

1. Add an element of the type Clickable Image to a page.
   The element will be called Image map #. You may change its Label if you wish.
   In our example we’re changing the label to Warehouse map.
2. Go to the Styling panel in the Image Map element’s properties.
   Add your picture by pressing Label Multimedia‘s [Select Multimedia] button
   and selecting or uploading your picture there – see 7.2 Adding images to a form design.
   You should now see your picture in the Preview panel to the right:

3. We will now place the mapping coordinates we created on image-map.net.
   For area A: select the numbers after coords=” and press Ctrl-C to copy them to the Clipboard (without the double quote characters “).

4. Go to the Clickable Image element in Designer and click on the first Area. You may change the Label of this to explain what the first area is.
   In Element Properties’ Area Coordinates, paste with Ctrl-V the coordinates you just copied.
   Select the correct shape in the Shape field below this.
   Point on the area in the Preview panel picture to check that the correct area is marked.

If the Area element has an automatic element ID, click the check box under the element ID to deselect this.

5. Repeat steps 3-4 until all areas have been added to the image in Designer.
   Press the green [+] on the image map name in the Elements panel if you need more than the first two areas.

Add code to the clickable areas

You can now start adding code to the areas to make something happen when they are clicked. This is done in the Element property Reference for each area. In the example below, a click on room B will jump to the page with the element room_b.

Example

To jump to a specific page when the area is clicked, type in its Reference: goto://placeholder_login

where placeholder_login is the first element on a login page, defined as a hidden Text Input element.

To set a specific value, such as English as language, type in Reference:

action://setValue|language|English

where language is the ID of a hidden Text Input element.

You can also select a value from e.g. a list of Single Select options:

action://selectOption|selected_deck|bridge_deck

This points to a Single Select element with the ID selected_deck having as one of its options bridge_deck.

See more on actions and values in Designing: 6.6 Links / Go to / Actions.