To display the image in the ImageMap control, set its ImageURL property to point to the file you just saved (
). The ImageMap control will now display the image of a Pocket PC, as shown in Figure 1-32.
An image map works by providing one or more hotspots for users to click on, each initiating a particular actionfor example, jumping to another page or altering the image itself. To define one or more hotspots, go to the Properties window for the ImageMap control, scroll down to the Hotspots property, and click on the Collections button (...) to invoke the HotSpot Collection Editor (shown in Figure 1-33).
The ImageMap control supports three kinds of hotspot: circles (
), rectangles (
), and polygons (
). The drop-down menu to the right of the dialog's Add button dialog lets you choose the type of hotspot to add. Once you add a hotspot, a Properties window appears that allows you to specify the location and dimensions of the hotspot, as well as its key properties. Figure 1-33 displays the properties of a
that has a radius of
Figure 1-33. Adding hotspots to the ImageMap control
You can also specify your hotspots by hand. You can switch to Source View and add in the hotspots elements manually, like this:
<asp:ImageMap ID="ImageMap1" runat="server"
X="103" Y="26" PostBackValue="PowerSwitch"
<asp:RectangleHotSpot Top="48" Bottom="242"
PostBackValue="Navigation" HotSpotMode="PostBack" />
You can use Microsoft Paint to display the image and then position your cursor at the various hotspots you want to define. You can find the coordinates of the cursor at the bottom of the window.
If you add the code shown in Step 6 or use the same attribute values to create hotspots with the HotSpot Collection Editor, you will end up with the hotspots shown in Figure 1-34.
Figure 1-34. Defining the hotspots in the ImageMap control
The ImageMap control supports three types of hotspot: circles, rectangles, and polygons
Figure 1-34 shows an ImageMap with the three hotspots: a
, and a
defines the region containing the power switch of the Pocket PC as a circle hotspot, whereas the
defines the screen region as a rectangle hotspot. The
defines the navigational
on the Pocket PC as a polygon hotspot.
A HotSpot control supports one of four modes of behavior, defined by its HotSpotMode property:
If a hotspot's
is set to "
", its behavior will assume that of the
as defined in the ImageMap control.
Another page can be loaded when a hotspot is clicked.
A postback is sent to the server. This is useful in cases where you need to perform some action (such as increment a variable) when the
clicks on a hotspot.
Disables the hotspot.
The HotSpotMode property of the ImageMap control defines the default behavior of all the hotspots in that control's HotSpot collection. A particular hotspot can override this behavior by setting its own HotSpotMode property.
how a hotspot can be used to postback to a server, set the HotSpotMode property of the
and the PostBackValue property value to
. To receive the postback value on the server side, add an event handler to service the click event of the ImageMap control:
Protected Sub ImageMap1_Click(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.ImageMapEventArgs) _
Dim str As String = "You have clicked " & e.PostBackValue