PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Overview
  • Drawing a clickable area
  • Drawing a clickable area on a clickable image
  • Tips for a polygon clickable area
  • Associating an action with a clickable area
  • Managing the action associated with a clickable area (image map) by programming
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview
If the image is an image map, you can include "Clickable areas" in the image. These areas can have different shapes: circle, rectangle, polygon, ...
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 clickable image

To draw a clickable area on a clickable image:
  1. Make sure that the clickable image is an image map with "Clickable areas" ("General" tab in the control description).
  2. Display the popup menu of the clickable image (right click).
  3. Depending on the shape of the area to create, select one of the following options in the popup menu:
    • "Insert a clickable area .. A rectangle": to define simple fixed areas.
    • "Insert a clickable area .. A circle": to define rounded areas.
    • "Insert a clickable area .. A polygon": to define complex areas such as a geographical 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. With the mouse, click the requested position on the area outline (a "+" sign is displayed below the mouse 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" from the popup menu of the clickable area.
  3. Select the requested 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) by programming

In the server code of the image map with "Clickable Areas", you have the ability to manage the action to perform according to the area clicked. To do so, call ImageArea in the server click code of the image.
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