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 image will have to be coded as a Base64 image, and 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 a Base64 code version of your image
Create the image code as described in Designing: 7.1 Base64 encoded image and copy it to the clipboard.
– Create an image map of your picture
- Go to image-map.net.
- Press [Select Image from My PC], find and upload your picture to the site.
- Start outlining the areas in the picture:
In the boxes below, select Shape “Rect” (for rectangle), type Title “A”.
Click and drag in the corners of room A to fill the whole area with the grey marquee.
- 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 and drag in the corners of room B to fill the whole area with the grey marquee.
- Repeat point 4 for the remaining areas. When done, press the button [Show Me the Code!].
- In the box that appears you will find the mapping coordinates to be inserted into the Zegeba Designer.
– Insert the clickable image in Designer
- 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.
- Go to the Styling panel in the Image Map element’s properties, and
copy the Base64 code of the picture into the field Media.
You should now see your picture in the Preview panel to the right:
- 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 “).
- 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.
- 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 suggested 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.
To jump to a specific page when the area is clicked, type in its Reference:
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:
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:
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.