Image Maps in ASP.NET 2.0

Monday Aug 22nd 2005 by Mike Gunderloy

You've probably heard a lot about the big changes in ASP.NET 2.0, but Microsoft didn't neglect the small things either. See how the new Image Map control makes it easy to design functional graphical interfaces for your Web pages without writing HTML or excessive code.

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.

Click here for a larger image.

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).

Defining hot spots for an image map

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" ""> <html xmlns="" > <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.

The Image Map in Action

To complete the test application, add the referenced pages (Server1.aspx, Server2.aspx, and Server3.aspx) and place captions on each page so that you can tell them apart. Run the application and click on the image map. You'll find that it's divided into three distinct regions, each of which act as a hyperlink to one of the target pages. As you move the cursor over the image, the browser status bar will show the target of the current hot spot, and if you hover the cursor, you'll see the alternate text appear as a tool tip (assuming you're using Internet Explorer as your browser).

What About Postbacks?

I mentioned earlier that the ASP.NET ImageMap control could also post back to its own page, instead of navigating to a fresh page. To control this, you set the HotSpotMode property to PostBack rather than Navigate. You can set this property on either the ImageMap control itself, or on individual HotSpots; the property on a HotSpot overrides any setting on the parent control. For each hot spot that posts back, you also need to provide a value for the PostBackValue property.

If you're using postback hot spots in your image map, you won't be supplying separate pages for each hot spot to navigate to. Instead, you need to hook up an event procedure to catch the Click event of the ImageMap control. You can test the PostBackValue property in this event procedure to know which hotspot the user clicked:

Protected Sub ImageMap1_Click(ByVal sender As Object, _
 ByVal e As System.Web.UI.WebControls.ImageMapEventArgs) _
 Handles ImageMap1.Click
    Response.Write("The PostBackValue is " & e.PostBackValue)
End Sub

The 80% Solution

While the ImageMap control is a great advance over the support for image maps in ASP.NET 1.0 (after all, there was no support for image maps in ASP.NET 1.0) there's still one glaring inadequacy here. If you were going to define a complex set of hot spots on an image, how would you want to do it? If you said "with a graphical editor," then I'm in complete agreement with you. Apparently, this didn't occur to the program manager at Microsoft who wrote the specification for this feature - or, more likely, there just wasn't time in the development schedule to build such an editor. Whatever the reason, I find myself annoyed every time I use this control that I have to figure out the actual pixel coordinates of the corners of my hot spots and enter them numerically, rather than drawing them right on the image. I guess this means there's still room for improvement in ASP.NET 3.0!

About the Author

Mike Gunderloy is the author of over 20 books and numerous articles on development topics, and the lead developer for Larkware. Check out his latest books, Coder to Developer and Developer to Designer, both from Sybex. When he's not writing code, Mike putters in the garden on his farm in eastern Washington state.

Mobile Site | Full Site
Copyright 2017 © QuinStreet Inc. All Rights Reserved