Professional > Interview scripting > Writing interview scripts > Page layout facilities > Styles > Using images > Images as buttons (clickable images)
 
Images as buttons (clickable images)
When a response list contains images, respondents are likely to try selecting responses by clicking on the images rather than using the check boxes or radio buttons. Nothing happens if they do this and respondents may think that the interview has stopped working. If the question has a single-choice response list, you can improve usability by making the images behave like buttons. In response lists with no special responses you can also hide the navigation buttons so that clicking on an image takes the respondent straight to the next question: see Styles for navigation buttons.
To make the images clickable, define the images in the metadata or routing section (see Using images). Then specify that responses should be displayed as buttons. You can do this in the metadata section by placing:
style(control(type = "button"))
after each response text, or in the routing section using:
Qname.Style.Control.Type = ControlTypes.ctButton
For example:
BestLogo "Which logo looks best?" categorical [1..1]
{
  PinkLogo "" style(image = "logo_fuchsia.gif", control(type = "button")),
  BlueLogo "" style(image = "logo_blue.gif", control(type = "button")),
  GreenLogo "" style(image = "logo_green.gif", control(type = "button")),
  YellowLogo "" style(image = "logo_yellow.gif", control(type = "button"))
};
Question with four clickable images
Response texts are not immediately visible when you display images as clickable buttons, but if you hover over the image the text appears momentarily in a pop-up box. If you want images with text, make the text part of the image file.
See also
Using images