Click here to Skip to main content
Click here to Skip to main content
Go to top

ImageMap.NET 2.0

, 31 Aug 2006
Rate this:
Please Sign up or sign in to vote.
An alternative ImageMap control for ASP.NET 2.0

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.
<!------------------------------- That's it! --------------------------->

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

aalmada
Software Developer (Senior) LusoVU
Portugal Portugal
No Biography provided
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
General4 polygon rollover images Pinmemberdmgroup198419-May-09 11:58 
GeneralRe: 4 polygon rollover images Pinmemberdmgroup198428-Jul-09 11:26 
GeneralRe: 4 polygon rollover images Pinmemberdmgroup198428-Jul-09 13:56 
GeneralPostBackValue PinmemberSopraPol15-Nov-07 1:34 
GeneralThis control is useless because of the Bugs Pinmemberdurden814-Oct-07 3:28 
AnswerRe: This control is useless because of the Bugs PinmemberYDreams4-Oct-07 3:42 
GeneralRe: This control is useless because of the Bugs Pinmemberdurden814-Oct-07 4:19 
GeneralGeca PinmemberGeca5-Jul-07 0:57 
QuestionDynamic image maps? PinmemberBryanMohr12-Mar-07 1:02 
Generalonclick fires repeatedly PinmemberMihai Drebot23-Jan-07 1:02 
GeneralRe: onclick fires repeatedly Pinmemberkarlitr0s31-May-07 6:55 
GeneralRe: onclick fires repeatedly Pinmemberkarlitr0s31-May-07 23:06 
GeneralAjax.Net Pinmemberafriend2123426-Oct-06 8:29 
GeneralOnClick Event Fires too Early Pinmemberft6221-Sep-06 4:38 
QuestionRe: OnClick Event Fires too Early PinmemberWinterBlade16-Oct-07 8:50 
AnswerRe: OnClick Event Fires too Early PinmemberFrans6221-Oct-07 21:21 
GeneralRe: OnClick Event Fires too Early PinmemberWinterBlade26-Oct-07 10:03 
QuestionCan the area be colored? Pinmembert395010-Sep-06 9:26 
QuestionDLL not found Pinmembersmart_chetan22-Aug-06 19:44 
AnswerRe: DLL not found PinmemberYDreams31-Aug-06 1:18 
GeneralPostback bug PinmemberBunce28-Jun-06 14:40 
QuestionWhere is the DLL ? Pinmembervedcyrus22-Jun-06 19:53 
QuestionClick Event won't fire PinmemberBunce19-Jun-06 18:27 
QuestionNo Postback Pinmemberwallyvis20-Apr-06 22:41 
QuestionRe: No Postback PinmemberBunce18-Jun-06 1:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 31 Aug 2006
Article Copyright 2006 by aalmada
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid