ImageMap

Introduction

The ImageMap control extends the Image control with a map functionality. So there can be different links in different areas of the image.
The areas are defined via the areas aggregation. An area can have different styles:

rect: rectangle
poly: polygon
circle: circle

The styles are defined with the shape property of the area. With the coords property the coordinates of the shape are defined. Depending on the shape-type there are different properties:

rect: Left upper edge pixel from left, left upper edge pixel from top, right bottom edge pixel from left, right bottom edge pixel from top
poly: X and Y coordinates from an edge. As much edges as needed can be defined
circle: Left and top pixels of the middle, radius in pixel

The href property defines the link URL of the area. The alt property defines the alternative text if the area can not be displayed.

Alternatively, the areas can be added using the createArea method. Here an area or only the properties can be filled in.

The name property of the ImageMap defines the anchor for the map in the Image control. This name must be used in the useMap property of the Image control.

Examples

Image With Different Areas Using `addArea`

Image With Different Areas Using `createArea`

API Documentation

See API documentation