Image Maps in ASP.NET 2.0, Page 2
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.