Configuring Image Map Shapes

Note: Changes to the configuration settings will not be implemented by the Image Map tab until you save them by clicking Apply & Save.

Figure 1 - Image Map Configuration

The properties and fields are as follows - :

• Image URL - the URL to the image you wish to use.
• Image width – the width of the image area displayed to the respondent, in pixels. Set the width of the image area to be identical to the width of the image to be used. If the width set is smaller than the width of the image used, then the image will be clipped.
• Image height – the height of the image area displayed to the respondent, in pixels. Set the height of the image area to be identical to the height of the image to be used. If the height set is smaller than the height of the image used, then the image will be clipped.
• Alt image URL – the URL to an alternative image. Areas of this image corresponding to the shapes you have drawn will be displayed to the respondent when he/she selects those areas. For example, if the initial image you load is a gray-scale picture or a line diagram, you can improve the respondent’s experience by also loading a color version of the image. Then when the respondent selects an answer (a shape), the alternative image area for the selected shape will be displayed. So the areas selected by the respondent will appear in color on an otherwise gray-scale or line image. If an Alt Image URL is used, the “Selected color” option will be ignored.
• Selected color – if the Alt image URL property is not used, then areas selected by the respondent will be given this color. Click on the color example square to open a color selection chart, then either select a standard color or type a color code into the Hex field.
• Opacity – you can set the opacity of the selected color such that the selected color does not completely hide the image area. 1 means the color is completely opaque, 0 means there is no color.
• Enable hover – you can set a color for the shape which will be applied when the respondent hovers the mouse pointer over it. Check this box to enable the functionality.
• Hover color - you can set a color for the shape which will be applied when the respondent hovers the mouse pointer over it. Click on the color example square to open a color selection chart, then either select a standard color or type a color code into the Hex field.
• Border – you can add a border to the shape. Check this box to activate the border functionality.
• Border width – set the desired width of the border, in pixels.
• Border color - you can set a color for the border. Click on the color example square to open a color selection chart, then either select a standard color or type a color code into the Hex field.
• Display answer labels with hover - check to display the answer label for a shape when the respondent hovers the mouse pointer over that shape.
• Copy from another survey or question - to simplify the creation procedure, once you have created an Image Map question in the Questionnaire Tree, you can copy the Image Map Configuration data and settings (Image URL, colors, created shapes etc.) from another question in this survey or a different survey, into the new Image Map question. When you check this box, two additional fields appear:
• Survey Id - this is the Survey Id of the survey containing the question from which you wish to copy the Image Map Configuration data and settings, The current survey is input here by default; change as appropriate.
• Question Id - type into this field the Question Id of the question from which you wish to copy the configuration. On completion, click Copy. All the Image Map Configuration data and settings of the selected question are then copied into this question. You can now make any changes to the configuration and shapes as required. Click Apply & Save on completion.
• Delete All – click this button, then confirm, to delete all the shapes that have been drawn in the current image. Note that any answer codes you may have added to the question's Answers tab will not be deleted. If you wish to delete the answer codes you must do this job manually, though there is no requirement to do so.
• Apply & Save – any changes you make in the Image Map tab must be saved by clicking here. Note that clicking the Save button for the Question Details page will not save these changes.
• Display codes – each shape is automatically given the next available numerical answer code when the shape is created. You can edit the answer codes as required, and you must enter the answer codes manually into the question’s Answers tab. Check this box to display on the image the answer codes for each shape.
• Drawing color – to make the shape easier to see while you are drawing it, you can set a color for the shape. Once the shape is created, the color and opacity will change to that specified in the Selected color and Opacity properties. Click on the color example square to open a color selection chart, then either select a standard color or type a color code into the Hex field.
• Shape – click in the field to open the selection menu, and select the type of shape you wish to draw. If you select Rectangle, an additional field appears:
• Split rectangle into squares - a rectangle shape can be divided automatically into squares of a given size when the shape is created (go to Splitting a Rectangle for more information). These smaller squares are then individual shapes, and each can be modified, duplicated or deleted separately. To use this functionality, specify an edge length in pixels for the squares that are to be created.

Splitting a Rectangle

A rectangle shape can be divided automatically into squares of a given size when the shape is created. These smaller squares are then individual shapes, and each can be modified, positioned, duplicated or deleted separately. When the rectangle is created, its width and height will be adjusted automatically up or down to fit to the nearest square.

1. In the Draw Shapes area, select the Rectangle shape.
2. Check the Split rectangle into squares box and type the required pixel dimension into the larger field.
3. Create the rectangle - .



Example of a rectangle split into squares

4. Modify the individual squares as required - .



Modifying the squares

5. On completion, click Apply & Save to save the changes in the Image Map database.

Right-Clicking Shapes

Right-click on a shape in the image to open the right-click menu for that shape - .

The shape's right-click menu

• Modify – select to modify the shape. The anchor squares appear, allowing you to drag them as required to alter the shape’s form. Click in the shape to get the "pointing hand” icon, then drag the shape to the required location in the image. Note that a polygon cannot be moved as-is; to move it you must move each corner individually. The Modify option can also be invoked by double-clicking on a shape.
• Duplicate – duplicates the selected shape. Right-click on the duplicate and enter an answer code, then click Create to create the shape. Once it is created, click on it and drag it to the desired location in the image, then click Apply & Save to save the changes. This is then an independent shape that can be modified, duplicated etc. as any other.
• Delete – deletes the selected shape. Don’t forget to click Apply & Save or the shape will reappear when you go out of the Image Map tab and later return. Note that when you delete a shape, if you have added a corresponding answer code in the Answers tab then this will not be deleted automatically; you must delete the code manually. However you do not have to go to the tab and delete the answer code; “unused” answer codes will merely be ignored.
• Cancel – click to close the right-click menu.

Hover Color

You can set a “hover” color for the shapes so that when the respondent hovers his/her mouse pointer over the shape it will become visible in the image.

1. Check the Enable Hover Effect box.
2. Select a color in the Hover Color field.
3. Click Apply & Save to save the changes.