PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

  • Overview
  • Drawing a graphic area
  • Drawing a graphic area on a clickable image
  • Tips for a polygon graphic area
  • Associating an action with a graphic area
  • Managing the action associated with a map area 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 clickable image used is a "Graphic areas (Map Area)", click areas can be included 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 graphic area

Drawing a graphic area on a clickable image

To draw a graphic area on a clickable image:
  1. Make sure that the clickable image is using the "Map Area" click mode ("General" tab in the control description).
  2. Display the popup menu of the clickable image (right mouse click).
  3. Depending on the shape of the area to create, select one of the following options in the popup menu:
    • "Insert a map area .. A rectangle": to define simple fixed areas.
    • "Insert a map area .. A circle": to define rounded areas.
    • "Insert a map 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.
Note: Each graphic 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 graphic 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 outline of the area (a "+" sign is displayed below the mouse cursor).
  3. Release the [Ctrl] key.
Associating an action with a graphic area
To associate an action with a graphic area:
  1. Select the map area.
  2. Select "Area action" from the popup menu of the map area.
  3. Select the requested action:
    • Running a link or a button found in the page, ...
    • Displaying a page, ...
    • Sending an email, ...
  4. Validate.

Managing the action associated with a map area by programming

In the server code of the "Map Area" image, you have the ability to manage the action to perform according to the area clicked. To do so, ImageArea must be used 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 required version
  • Version 9
Comments
Click [Add] to post a comment