ASP.Net Imagemap Hotspot shapes

The Hotspot regions of ASP.Net Imagemap control provides three types of shapes that can be defined as child element templates of imagemap control. You can specify the x-axis and y-axis coordinates for each type of HotSpot shapes to define the specific location for the region on the associated image displayed on the web page using Imagemap control. Users can click on the hotspot region to navigate to the other web page or perform the page PostBack based on the HotSpotMode defined for the imagemap control.

Following are the three types of HotSpots that can be defined for ASP.Net Imagemap control:

1. CircelHotSpot: It allows you to define the circular hotspot region over the round type object visible in the mapped image. The CircleHotSpot region has following properties that can be used to define the clickable hotspot region on the image at some specific location:

i. Radius (R): It accepts the integer type value to define the radius for the circle type hotspot region.

ii. X: It accepts the integer type value to define the location of the hotspot region i.e. center of the circle shape along the x-axis with respect to the image.

iii. Y: It also accepts the integer type value to define the location of the hotspot region i.e. center of the circle shape along the y-axis with respect to the image.

2. RectangleHotSpot: It enables you to define the rectangular hotspot region over the square or rectangular shaped objects visible in the mapped image. You can specify the values for the following properties of RectangleHotSpot region to define the rectangle shaped hotspot region at some specific location on the image:

i. Left: It accepts the integer type value that enables you to specify the value for the x-axis coordinates for left side of the rectangular shaped region (X1, X2).

ii. Right: It accepts the integer type value that enables you to specify the value for the x-axis coordinates for right side of the rectangular shaped region (X3, X4).

iii. Top: It accepts the integer type value that enables you to specify the value for the y-axis coordinates for top edge of the rectangular shaped region (Y1, Y3).

iv. Bottom: It accepts the integer type value that enables you to specify the value for the y-axis coordinates for bottom edge of the rectangular shaped region (Y2, Y4).

3. PolygonHotSpot: The PolygonHotSpot allows you to specify the multiple pairs of x-axis and y-axis coordinates that define the vertices of polygon. It accepts the comma separated integer type values as multiple pairs of x and y coordinates. It provides the following property to specify the values for multiple vertices of a polygon:

i. Coordinates: It accepts the comma separated integer type values to define the vertices of a polygon for example: x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,x6,y6.

Common Properties of HotSpot Objects

Other than the coordinates related properties of HotSpot regions of ASP.Net Imagemap control there are some common types of properties that allow you to customize its behavior:

1. AlternateText: It enables you to specify the alternate text for the Hotspot region.

2. HotSpotMode: It allows you to customize the behavior of click event of Hotspot region.

3. NavigateUrl: You can specify the URL of the web page to the NavigateUrl property to redirect the user to the specified page when he/she clicks on the associated Hotspot region.

4. PostBackValue: It enables you to specify the PostBackValue for the HotSpot region that can be accessed at server using its click event handler argument.

5. Target: You can specify the target for each Hotspot region that allows the control to open the NavigateUrl in the specified target frame or window.

Sample Code for ASP.Net Imagemap HotSpot Shapes

The above sample code will show an image on the web page mapped with three types of HotSpot regions having different shapes such as circle, rectangle and polygon.

Continue to the next tutorial: ASP.Net Imagemap HotSpotMode property to learn how to change the behavior of click event of Imagemap control using its HotSpotMode property.