Click here to Skip to main content
Licence 
First Posted 2 Mar 2006
Views 78,268
Bookmarked 38 times

ImageMap.NET 2.0

By | 31 Aug 2006 | Article
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.

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

About the Author

YDreams

Web Developer

Portugal Portugal

Member

YDreams develops technology, products and services for two of todays' hottest areas: interactive entertainment and wireless location-based services.
 
We count on a select group of talents with proven expertise in areas ranging from geographical information systems to software engineering, game design, virtual reality, marketing, communication and design.


Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board. (secure sign-in)
 
Search this forum  
 FAQ
    Noise  Layout  Per page   
  Refresh
General4 polygon rollover images Pinmemberdmgroup198411:58 19 May '09  
GeneralRe: 4 polygon rollover images Pinmemberdmgroup198411:26 28 Jul '09  
GeneralRe: 4 polygon rollover images Pinmemberdmgroup198413:56 28 Jul '09  
GeneralPostBackValue PinmemberSopraPol1:34 15 Nov '07  
Hi,
 
This Imagemap class is almost exactly what I'm looking for...I say almost because I found that using the postback feature fairly useless when I was using it my environment.
I have modified a copy of this code which includes a PostBackValue property, similar to the Microsoft one.
If you would like a copy of the code, or if YDreams would like to embed this into their original code , email me at paul.inglis (At) gmail.com
GeneralThis control is useless because of the Bugs Pinmemberdurden813:28 4 Oct '07  
AnswerRe: This control is useless because of the Bugs PinmemberYDreams3:42 4 Oct '07  
GeneralRe: This control is useless because of the Bugs Pinmemberdurden814:19 4 Oct '07  
GeneralGeca PinmemberGeca0:57 5 Jul '07  
QuestionDynamic image maps? PinmemberBryanMohr1:02 12 Mar '07  
Generalonclick fires repeatedly PinmemberMihai Drebot1:02 23 Jan '07  
GeneralRe: onclick fires repeatedly Pinmemberkarlitr0s6:55 31 May '07  
GeneralRe: onclick fires repeatedly Pinmemberkarlitr0s23:06 31 May '07  
GeneralAjax.Net Pinmemberafriend212348:29 26 Oct '06  
GeneralOnClick Event Fires too Early Pinmemberft624:38 21 Sep '06  
QuestionRe: OnClick Event Fires too Early PinmemberWinterBlade8:50 16 Oct '07  
AnswerRe: OnClick Event Fires too Early PinmemberFrans6221:21 21 Oct '07  
GeneralRe: OnClick Event Fires too Early PinmemberWinterBlade10:03 26 Oct '07  
QuestionCan the area be colored? Pinmembert39509:26 10 Sep '06  
QuestionDLL not found Pinmembersmart_chetan19:44 22 Aug '06  
AnswerRe: DLL not found PinmemberYDreams1:18 31 Aug '06  
GeneralPostback bug PinmemberBunce14:40 28 Jun '06  
QuestionWhere is the DLL ? Pinmembervedcyrus19:53 22 Jun '06  
QuestionClick Event won't fire PinmemberBunce18:27 19 Jun '06  
QuestionNo Postback Pinmemberwallyvis22:41 20 Apr '06  
QuestionRe: No Postback PinmemberBunce1:10 18 Jun '06  

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.

Permalink | Advertise | Privacy | Mobile
Web04 | 2.5.120529.1 | Last Updated 31 Aug 2006
Article Copyright 2006 by YDreams
Everything else Copyright © CodeProject, 1999-2012
Terms of Use
Layout: fixed | fluid