ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Clickable Image control
  • Overview
  • Drawing a clickable area
  • Drawing a clickable area on a Image control (Image map)
  • Tips for a polygon clickable area
  • Associating an action with a clickable area
  • Managing the action associated with a clickable area (image map) programmatically
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Overview
In a page, an Image control can contain clickable areas. In this case, in the "General" tab of the control description window, "Action on click" is set to "Clickable areas defined in edit mode (image map)".
You can then include clickable areas in the image. These areas can have different shapes: circle, rectangle, polygon, etc.
A specific action can be assigned to each area and to the entire image. The corresponding action will be performed when the Web user clicks one of these areas.
Drawing a clickable area

Drawing a clickable area on a Image control (Image map)

To draw a clickable area on an Image control (Image map):
  1. In the "General" tab of the Image control description, make sure the action is set to "Clickable areas defined in edit mode (Image map)".
  2. Right-click to open the context menu of the image and select "Edit clickable areas". The Image control switches to edit mode: a yellow outline is displayed.
  3. Open the context menu of the Image control in edit mode. Depending on the shape of the area to create, select one of the following options in the context menu:
    • "Add a rectangle": to define simple fixed areas.
    • "Add a circle": to define rounded areas.
    • "Add a polygon": to define complex areas such as a geographic map.
  4. For a circle or a rectangle, the area is automatically created.
    To move the area, click the area and keep the left mouse button down while moving the area.
    To resize the area, click the area and select one of the black handles.
  5. For a polygon, click the location where the area must be drawn. Then, click to define each point of the polygon. To close the polygon, use the right click.
Remark: Each clickable area is identified by a number. This number corresponds to the order in which the areas have been created. This number is automatically displayed in the area.

Tips for a polygon clickable area

To precisely select the points of the area, you have the ability to zoom the page in the page editor. To do so, select the zoom percentage in the status bar of WEBDEV.
To add vertices to the polygon:
  1. Keep the Ctrl key down.
  2. Click at the desired location on the area outline (a "+" sign appears under the cursor).
  3. Release the Ctrl key.
Associating an action with a clickable area
To associate an action with a clickable area:
  1. Select the clickable area.
  2. Select "Area action" in the context menu of the clickable area.
  3. In the window that appears, select the desired action:
    • Running a link or a button found in the page, ...
    • Displaying a page, ...
    • Send an email, ...
  4. Validate.

Managing the action associated with a clickable area (image map) programmatically

In the server code of the Image control (Image map), you can manage the action to be performed according to the clicked area. To do so, simply call ImageArea in the server click code of the Image control.
For example, the following code is used to display a different page according to the area that was clicked. The areas are identified by a number. This number corresponds to the order in which the areas have been created. This number is automatically displayed in the area.
Caution: If an area is deleted, the number for the areas created after it will be modified (initial number -1).
// -- Server code: Click on IMG_Click1
Area is int
// Retrieve the area that was clicked
Area = ImageArea()
SWITCH Area
CASE 1: PageDisplay(PAGE_Home)
CASE 2: PageDisplay(PAGE_AboutUs)
END
Related Examples:
The MapArea control Unit examples (WEBDEV): The MapArea control
[ + ] Using the MapArea control to display specific click areas in an image.
Minimum version required
  • Version 9
Comments
Click [Add] to post a comment

Last update: 06/22/2023

Send a report | Local help