Modern web sites use image maps to allow users to navigate to another part of the site, or to initiate an action by clicking on one or more hotspots of an image. For example, you want to display a world map on a page so that users can click on specific parts of the map to see information about a particular country. ASP.NET 2.0 includes a new ImageMap control that allows you to create image maps easily and painlessly.
The ImageMap control can be found in the Visual Studio Toolbox under the Standard tab.
To see how the ImageMap control works, you will use an ImageMap control to display the image of a Pocket PC. You will define three different hotspots of different shapes on the Pocket PC so that users are able to click on the different parts of the image to see more information.
In Visual Studio 2005, create a new web site project and name it C:\ASPNET20\chap01-ImageMap.
Double-click the ImageMap control in the Toolbox to add a control to the default Web Form.
In Solution Explorer, right-click the project name and add a new folder named Images, where you'll store the image used in this project. Save an image named dellaxim.jpg (see Figure 1-32) into the new folder: C:\ASPNET20\chap01-ImageMap\Images\.
To display the image in the ImageMap control, set its ImageURL property to point to the file you just saved (Images/dellaxim.jpg ). 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 action—for 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
three kinds of hotspot: circles (
RectangleHotSpot), and polygons
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
CircleHotSpot that has a radius of
5 and x and
y coordinates of
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" ImageUrl="Images/dellaxim.jpg"> <asp:CircleHotSpot HotSpotMode="PostBack" X="103" Y="26" PostBackValue="PowerSwitch" Radius="5" /> <asp:RectangleHotSpot Top="48" Bottom="242" Left="30" NavigateUrl="./screen.aspx" Right="177" /> <asp:PolygonHotSpot Coordinates="92,273,112,273,123,287,112,303,92,303,83,287" PostBackValue="Navigation" HotSpotMode="PostBack" /> </asp:ImageMap>
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 shows an ImageMap with the three
RectangleHotSpot, and a
CircleHotSpot defines the region containing the
power switch of the Pocket PC as a circle hotspot, whereas the
RectangleHotSpot defines the screen region as a
rectangle hotspot. The
PolygonHotSpot defines the
navigational buttons 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
HotSpotMode is set
Not Set", its behavior will assume that of the
HotSpotMode 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 user 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.
To illustrate how a hotspot can be used to postback to a server, set
the HotSpotMode property of the
PostBack and the PostBackValue property value to
PowerSwitch. To receive the postback value on the
server side, add an event handler to service the click event of the
Protected Sub ImageMap1_Click(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.ImageMapEventArgs) _ Handles ImageMap1.Click Dim str As String = "You have clicked " & e.PostBackValue Response.Write(str) End Sub
Add a new Web Form to your project (right-click the project name in
Solution Explorer, select Add New Item..., and then select Web Form)
and name it screen.aspx. This page will be
displayed when the user clicks on the
RectangleHotSpot to navigate to another
page by setting its HotSpotMode property to
Navigate and setting the NavigateURL property
Press F5 to test the application. Note how your mouse pointer changes when it hovers over the various hotspots.
...adding Tool Tip text to the hotspots?
You can add Tool Tip text to the various controls in the ImageControl control using the AlternateText property. Adding Tool Tip text to hotspots greatly improves the usability of your application, as users can view more information about a hotspot. You can add Tool Tip text in Source View:
<asp:CircleHotSpot HotSpotMode="PostBack" X="103" Y="26" Radius="5" PostBackValue="PowerSwitch" AlternateText="Power Switch" />
You can also add it programmatically:
Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles Me.Load ImageMap1.HotSpots(0).AlternateText = "Power Switch" ImageMap1.HotSpots(1).AlternateText = "Screen" ImageMap1.HotSpots(2).AlternateText = "Navigation" End Sub
The next time the user's mouse hovers over the hotspots, he will see the Tool Tip text as shown in Figure 1-35.
Besides using the ImageMap control to implement an image map, you can use the ImageButton as an image map. To see how, check out this link: http://samples.gotdotnet.com/quickstart/aspplus/samples/webforms/ctrlref/webctrl/imagebutton/doc_imagebut.aspx.