ImageMap.NET 2.0

• Download source code - 22 Kb
• Download demo solution - 31 Kb

Introduction

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:

• Assign javascript to the hot spots. For example, you can change the background image when the mouse cursor hovers an hot spot.
• 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.

Assigning Javascript to hot spots

To assign Javascript to an hot spot, you just need to use the Attributes parameter the following way:

YDreams.Web.UI.WebControls.PolygonHotSpot polygonHotSpot = (YDreams.Web.UI.WebControls.PolygonHotSpot)this.ImageMap1.HotSpots["Polygon"];
if (polygonHotSpot != null)
{
    polygonHotSpot.Attributes.Add("onMouseOver", "javascript:alert("hi");");
}

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;
    }

Tested browsers

The control has been tested on the following browsers:

• Microsoft Internet Explorer 6.0
• Mozilla Firefox 1.5

History

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