Microsoft & .NETASPImage Maps in ASP.NET 2.0

Image Maps in ASP.NET 2.0

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

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

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”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html >
<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.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories