The Image map is very easy to use, Simply drag and drop ImageMap web block whenever you want to use, It has an image placeholder where you can give your image either Local image, External URL or Binary data.

The Image map has an input parameter that takes a list of area which has below list items -

• Name - The name of a specific area in the image to uniquely identify it.
• Shape - Specifies the shape of the area, available options are - rect, circle & poly.
• Coords - Specifies the coordinates of the area.
• Alt - Specifies an alternate text for the area. Required if the href attribute is present.

More about Shapes and Coordinate System -

All coordinates (x and y values) are measured in CSS pixels and are relative to the top-left corner of the image, which is (0, 0).

1. shape="rect" (Rectangle )

This shape requires four coordinate values:

x_1, y_1, x_2, y_2

• (x_1, y_1) is the coordinate of the top-left corner.
• (x_2, y_2) is the coordinate of the bottom-right corner.

Example: A rectangle starting 50px right and 50px down, extending to 150px right and 100px down.

2. shape="circle" (Circle)

This shape requires three coordinate values:

x, y, r

• (x, y) is the coordinate of the center of the circle.
• r is the radius in pixels.

Example: A circle centered at (100, 75) with a radius of 50 pixels.

3. shape="poly" (Polygon)

This shape requires an even number of coordinate values (at least six for a triangle) which define the vertices of the polygon in sequence:

x_1, y_1, x_2, y_2, x_3, y_3, ….., x_n, y_n

• The browser automatically draws lines connecting all points.
• The polygon is automatically closed (a line is drawn from the last point back to the first point).

Example: A triangle with vertices at (20, 100), (100, 10), and (180, 100).