Image Maps in ASP.NET 2.0
Along with the big changes that you've probably heard about (things like themes, master pages, and support for Web parts), ASP.NET 2.0 includes a lot of smaller changes. For example, this version makes image maps a useful part of the ASP.NET developer's toolbox. In this article, I'll show you how the new ImageMap control works and what you can do with it. As always, there may be some changes between the code in this article (which is based on beta 2 of Visual Studio 2005) and the final shipping product.
What's an Image Map?
Image maps are a part of the HTML specification that go way back - to well before ASP.NET, or, for that matter, even "classic" ASP. The basic idea is that you take an image an associate it with a "map" that specifies regions on the screen. Each region defines a hotspot on the screen, which acts like a hyperlink: it can navigate to another location on the Web.
What the ASP.NET designers have done is to wrap the image map concept up as a control, so that you don't have to write HTML directly. Instead, you handle everything just by setting properties. This is consistent with the way that the rest of the native ASP.NET controls work. Let's see an example.
Building an Image Map
To get started, I created a new ASP.NET application using Visual Studio 2005 and placed an ImageMap control and some text on the default.aspx page. I then set the ImageUrl property of the ImageMap control to point to a graphic showing three servers. Figure 1 shows this page in the designer.
The next step is to define the hotspots for the image. In this case, I want three rectangular hot spots, one for each server. An image map can also have circular hot spots or polygonal hot spots with an arbitrary number of vertices. To define hot spots, click on the builder button in the HotSpots property, which opens the HotSpot Collection Editor (shown in Figure 2).
The properties in the Appearance section of the editor define the coordinates of the hot spot (in pixels), while the properties in the Behavior section define what will happen when the user clicks on this particular hot spot. In this case, the application will navigate to the Server1.aspx page. ASP.NET image map hot spots can also post back to the page containing the image map; I'll talk about postback hot spots later in this article. The Add button in the Collection Editor has a dropdown arrow that lets you choose between adding circular, rectangular, and polygonal hot spots. By default, it adds a circular hot spot.
Of course, the designers are just a pretty face on the markup. While you're not required to look at the markup, it can be useful to know what it looks like. Here's the source for the default.aspx page:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Network status</title> </head> <body> <h1>Network Status</h1> <form id="form1" runat="server"> <div> <asp:ImageMap ID="ImageMap1" runat="server" Height="220px" ImageUrl="~/Servers.gif" Width="420px"> <asp:RectangleHotSpot Bottom="220" HotSpotMode="Navigate" NavigateUrl="~/Server1.aspx" Right="140" AlternateText="Server 1" /> <asp:RectangleHotSpot Bottom="220" HotSpotMode="Navigate" Left="141" NavigateUrl="~/Server2.aspx" Right="280" AlternateText="Server 2" /> <asp:RectangleHotSpot Bottom="220" HotSpotMode="Navigate" Left="281" NavigateUrl="~/Server3.aspx" Right="420" AlternateText="Server 3" /> </asp:ImageMap> </div> </form> <p>Click any machine for detailed status</p> </body> </html>
As with any other ASP.NET control, all the properties of the ImageMap control end up in the markup. The hotspots are stored as child RectangleHotSpot controls within the parent ImageMap controls.