Image mapping a button

You can use image mapping to specify that a button performs a different action depending on which part of the image the user clicks. This is an advanced feature; to use it, you must know how to hand-code formulas.

When a user clicks a button that contains an image, the form automatically detects where the user clicked on the image. The form records the user's click based on an invisible grid that overlies the image. The points along each axis of the grid are numbered from zero through 1,000. The top left corner of the image is (0,0) and the bottom right corner is (1,000, 1,000), regardless of the size of the image. When the user clicks a button, the form determines the point on the grid that is closest to where the user clicks.

The following steps show how to set a mapping formula which directs users to different URLs based upon where in the image they click.

Select Web link from the Palette.
Click on the canvas. The Web link appears on the page and the Properties window opens.
Click down arrow located next to the URL field and select Compute Editor .
Type the formula in the text area at the end of the window (see the following examples).
Click OK to save the compute and close the Compute Editor.
for the Image: field, click Browse to find the image.
Select the image and click Open.
The image name appears in the Image: field.
Click OK to save changes and close the Properties window.

Examples

The following formula points to a different URL if the user clicks on the button or the right half of the button. coordinates[0]>'500' indicates “if the x-coordinate is greater than 500”.

coordinates[0]>'500' ? 'http://www.myserver1.com' : 
'http://www.myserver2.com'

If the user clicks on the right half of the button (that is, the x-coordinate is greater than 500), the URL points to myserver1.com. Otherwise, the URL points to myserver2.com.

The following formula points to a different URL if the user clicks on the top half of the button or the bottom half of the button. coordinates[1]>'500' indicates “if the y-coordinate is greater than 500”.

coordinates[1]>'500' ? 'http://www.myserver1.com' : 
'http://www.myserver2.com'

If the user clicks on the bottom half of the button (that is, the y-coordinate is greater than 500), the URL points to ibm.com. Otherwise, the URL points to myserver1.com.