The .NET framework comes with a nice set of web server controls that allows you to code for ASP.NET in a object-oriented manner and hiding the complexity of HTML, scripting and browser versioning. Unfortunately .NET 1.x didn't have a control that could generate image maps. I needed one so I decided to make one myself and make it public here.
My control had a few limitations so I was happy to find out that ASP.NET 2.0 had a ImageMap control. After playing with it, I found that it also has its own limitations. I decided then to create a new version of my ImageMap control for ASP.NET 2.0.
Why another control?
This control can do all that Microsoft's control does plus the following:
- The hot spots are displayed in design mode. Colored by hot spot mode.
- The polygon hot spots are defined by a list of vertices instead of a string of coordinates.
- Image maps can share the same hot spot layout. HTML supports it, why not support it too?
- Display a description string on the browser's status bar when the mouse cursor hovers on a hot spot.
- The click event handler's argument supplies a reference to the hot spot and the coordinates where it was clicked.
YDreams.Web.UI.WebControls.PolygonHotSpot polygonHotSpot = (YDreams.Web.UI.WebControls.PolygonHotSpot)this.ImageMap1.HotSpots["Polygon"];
if (polygonHotSpot != null)
In the demo project you can see how to change the image when the mouse cursor hovers on a hot spot.
Post back handler
The click event handler is slightly different. The last argument gives you a reference of the hot spot the user clicked on and the mouse cursor coordinates relative to the upper-left corner of the control.
protected void ImageMap1_Click(object sender, YDreams.Web.UI.WebControls.ImageMapClickEventArgs args)
YDreams.Web.UI.WebControls.HotSpot hotSpot = args.HotSpot;
int x = args.X;
int y = args.Y;
The control has been tested on the following browsers:
- Microsoft Internet Explorer 6.0
- Mozilla Firefox 1.5
8/31/2006 - Fixed bug that prevented post backs from happening when other controls with AutoPostBack set to true where present.
3/2/2006 - Submitted article.
3/8/2006 - Added actions to toggle hot spots display in design mode.
<!------------------------------- That's it! --------------------------->