Click here to Skip to main content
12,951,289 members (59,341 online)
Click here to Skip to main content
Add your own
alternative version


102 bookmarked
Posted 3 Jul 2002


, 3 Jul 2002
Rate this:
Please Sign up or sign in to vote.
An ImageMap control for ASP.NET.
<!-- Download Links --> <!-- Article image -->

Sample Image - example.png

<!-- Add the rest of your HTML here -->


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, scripts and browser versioning. Unfortunately it doesn't supply any control that can generate image maps. We have developed a control that does just that.

This article explains how you can use this control. The supplied source code can also be used as an example on how to develop your own web server controls.

ImageButton vs. ImageMap

ASP.NET comes with an ImageButton control that handles mouse clicks on images but it doesn't behave exactly like an image map. The main difference is that you can not specify sensitive areas using the ImageButton. The consequences of this are:

  • You have to check if the coordinates of the click are within certain ranges. That's relatively easy for rectangular areas but for circles and polygons that's a lot more complicated. Not talking about the number of ifs that you have to maintain.
  • The mouse cursor, while over the image, is always a pointing finger. On image maps the pointing finger only shows while over the sensitive areas.
  • You can not have different tool tips within the same image.

The ImageMap control solves all these problems and can do everything a

can do.

Creating sensitive areas

The control supplies three classes for the creation of rectangular, circular and polygon areas. To add these to the control you just have to create instances of the areas and add them to the areas list using the Areas property.

The sensitive areas are handled by the order that they are added. If the areas overlap on the point that the user clicks on, then the first area is used.


Allows the creation of rectangular sensitive areas.

Public constructors:

public ImageMapRectangleArea(Rectangle rectangle)
public ImageMapRectangleArea(string hRef, Rectangle rectangle)
public ImageMapRectangleArea(string hRef, Rectangle rectangle, 
                             string toolTip)


hRef - Hyperlink associated with the area. Default is null.
rectangle - location, width and heigth of the rectangular area, in local coordinates.
toolTip - String displayed when the mouse cursor stops over the area. Default is null.


Allows the creation of circular sensitive areas.

Public constructors:

public ImageMapCircleArea(Point center, int radius)
public ImageMapCircleArea(string hRef, Point center, int radius)
public ImageMapCircleArea(string hRef, Point center, int radius, 
                          string toolTip)


hRef - Hyperlink associated with the area. Default is null.
center - Center of the circle, in local coordinates.
radius - The radius of the circle.
toolTip - String displayed when the mouse cursor stops over the area. Default is null.


Allows the creation of polygon sensitive areas.

Public constructors:

public ImageMapPolygonArea()
public ImageMapPolygonArea(string hRef)
public ImageMapPolygonArea(string hRef, string toolTip)


hRef - Hyperlink associated with the area. Default is null.
toolTip - String displayed when the mouse cursor stops over the area. Default is null.


The polygon points are added using the Points parameter of the ImageMapPolygonArea.

Image maps with hyperlinks

You can create regular image maps with hyperlinks associated to the sensitive area. When the user clicks on them the browser jumps to the specified URL. Just add the areas with non-empty URLs.

private void Page_Load(object sender, System.EventArgs e)
    // add a rectangular area
          new ImageMapRectangleArea("", 
                                    new Rectangle(405, 188, 15, 15), 
                                    "Click to go to YDreams"));
    // add a circular area
         new ImageMapCircleArea("", 
                                new Point(210, 197), 100, 
                                "Click to go to CodeProject"));
    // add a polygon area
    ImageMapPolygonArea polygonArea
             = new ImageMapPolygonArea("", "This area has no link");

    polygonArea.Areas.Add(new Point(0, 0));
    polygonArea.Areas.Add(new Point(100, 0));
    polygonArea.Areas.Add(new Point(0, 100));

If the sensitive area has the URL set to the empty string, then it won't have an hyperlink. The mouse cursor will be an arrow but the tooltip will show up.

Image maps with server-side event handling

If you need to process, not only the area, but also the coordinates of the point where the user clicked on, you can send these to the server and have them handled there.

private void Page_Load(object sender, System.EventArgs e)
    imageMap.Click += new ImageMapClickEventHandler(imageMap_Click);

    imageMap.Areas.Add(new ImageMapRectangleArea(null, 
             new Rectangle(405, 188, 15, 15), "Click to go to YDreams"));
    imageMap.Areas.Add(new ImageMapRectangleArea(null,
             new Rectangle(405, 379, 15, 15), "Click to go to CodeProject"));

private void ImageMap_Click(object sender, ImageMapClickEventArgs args)
    ImageMapArea area = imageMap.Areas[args.AreaIndex];
    int x = args.X;
    int y = args.Y
    // add event handling code here

To do this, you just need to assign an event handler to the Click event of the control and assign a null URL to all the areas that you want to be handled on the server.

The event will only be raised if the user clicks on a sensitive area. To simulate the ImageButton you just need to add an area that occupies all the image.

Image maps with client-side event handling

If you want to save on traffic to the server, and the browser allows client-side scripting, you can have the events handled on the client.

private void Page_Load(object sender, System.EventArgs e)
    // create an instance of the area
    ImageMapArea area
         = new ImageMapRectangleArea("", 
                                     new Rectangle(405, 379, 15, 15), 
                                     "Click to go to CodeProject");    
    // add the area to the map
    // add OnMouseOver and OnMouseOut event handlers to the area
    area.Attributes.Add("onMouseOver", "javascript:DisplayImage(image2)");
    area.Attributes.Add("onMouseOut", "javascript:DisplayImage(image1)");
    // add the script called by the event handlers
    StringBuilder script = new StringBuilder();
    script.AppendFormat("<script language="\""javascript\">{0}", 
    script.AppendFormat("var image1 = new Image(291, 112);{0}", 
    script.AppendFormat("image1.src = \"image1.png\";{0}", 
    script.AppendFormat("var image2 = new Image(291, 112);{0}", 
    script.AppendFormat("image2.src = \"image2.png\";{0}", 
    script.AppendFormat("function DisplayImage(image) {0}{1}", "{", 
    script.AppendFormat("document.imageMap.src = image.src;{0}", 
    script.AppendFormat("return true;{0}", Environment.NewLine);
    script.AppendFormat("\t{0}{1}", "}", Environment.NewLine);

    Page.RegisterClientScriptBlock("DisplayImage", script.ToString());

Mixing image map types

You can mix all the three types of image maps described above. The only restriction is that you can not assign an onClick client-side event handler to the areas that you want to have handled on the server (that have the URL set to null).

Supported browsers

  • Internet Explorer 6.0

What's next?

Support more browsers. Any help is welcome...


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

Software Developer (Senior) LusoVU
Portugal Portugal
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 3 Pin
Mainak Roy Chowdhury22-Sep-11 5:40
memberMainak Roy Chowdhury22-Sep-11 5:40 
GeneralA Little Complex Pin
tsingroo30-Jul-10 22:55
membertsingroo30-Jul-10 22:55 
GeneralHotspots color or Backroung Image Pin
shashi198614-Jul-10 3:42
membershashi198614-Jul-10 3:42 
GeneralAdd Multiple Polygon HotSpots Pin
dmgroup198415-May-09 7:36
memberdmgroup198415-May-09 7:36 
GeneralImageMap with mobile web form Pin
codeprojid11-Aug-07 1:46
membercodeprojid11-Aug-07 1:46 
GeneralimageMap hotspot color Pin
mastjabs25-Apr-06 12:47
membermastjabs25-Apr-06 12:47 
GeneralMultiple ImageMaps within the same form [fix] Pin
flipflargin30-Mar-06 9:54
memberflipflargin30-Mar-06 9:54 
GeneralNice Job Pin
Mike Elliott3-Mar-06 4:52
memberMike Elliott3-Mar-06 4:52 
NewsImageMap.NET 2.0 Pin
YDreams2-Mar-06 7:26
memberYDreams2-Mar-06 7:26 
GeneralImagemap cssstyle Pin
LeftyServ31-Jan-06 23:02
memberLeftyServ31-Jan-06 23:02 
GeneralRe: Imagemap cssstyle Pin
YDreams2-Mar-06 8:07
memberYDreams2-Mar-06 8:07 
Questionhighlighting a hotspot on mouseover? Pin
Kieft2-Jan-06 18:21
memberKieft2-Jan-06 18:21 
AnswerRe: highlighting a hotspot on mouseover? Pin
Antao2-Jan-06 23:01
memberAntao2-Jan-06 23:01 
GeneralRe: highlighting a hotspot on mouseover? Pin
VTMiddie3122-Feb-06 7:09
memberVTMiddie3122-Feb-06 7:09 
I was able to get this working after I created a small javascript function that swapped the base image that is rendered for the map..

Here's how I did it:

1. I created the large image without the rollover state. (down.gif)
2. I created another image WITH the rollover state..... (up.gif)
3. I modified the overridden Render function of the ImageMap so that each area tag that is written out also has an ID attribute that is the same as the Name attribute. This is important for Mozilla based browsers, when calling the javascript document function : getElementById.....

Add this to your foreach(ImageMapArea area in areas) section.....

output.WriteAttribute("ID", index.ToString()); //this will ensure that Mozilla sees an ID when your javascript attempts to getElementsByTheirIDs......

4. I wrote a small funtion in javascript to swap in and out the over and down images depending on an onMouseOver, onMouseOut event on each ImageMapArea.....

on my client page I added the following attributes to each ImageMapArea that I created:

polygonArea.Attributes.Add("onMouseOver", "javascript:SwapImages('us', 'over.gif');");

polygonArea.Attributes.Add("onMouseOut", "javascript:SwapImages('us', 'down.gif');");

My javascript SwapImages funtion looks like this:

function SwapImages(imageid, imagepath)
document.getElementById(imageid).src = imagepath;

Now if I could only figure out how to get Mozilla to harness the click even on each area...... any hints on how to adjust the javascript so that Mozilla can handle the Post back? I'm confused as to how this works fundamentally? Meaning How does Javascript tell the codebehind that an event fired from the area map, and then pass it an index, and coordinates (Hidden values, right?) How does the codebehind know when the onClick got fired in IE, and why does Mozilla not know when this happens?

Thanks in advance.... great control by the way, its helping me a ton.

GeneralImage map Pin
AnushaAjit15-Dec-05 20:22
memberAnushaAjit15-Dec-05 20:22 
GeneralRe: Image map Pin
Antao6-Jan-06 8:26
memberAntao6-Jan-06 8:26 
QuestionAnybody has significantly improved this? Pin
Gps Touch1-Aug-05 8:36
sussGps Touch1-Aug-05 8:36 
AnswerRe: Anybody has significantly improved this? Pin
Antao2-Jan-06 23:20
memberAntao2-Jan-06 23:20 
AnswerRe: Anybody has significantly improved this? Pin
Antao3-Jan-06 3:50
memberAntao3-Jan-06 3:50 
AnswerRe: Anybody has significantly improved this? Pin
YDreams3-Mar-06 2:17
memberYDreams3-Mar-06 2:17 
QuestionHow to link to a regular image map from a table Pin
iampedro5-Jul-05 11:01
memberiampedro5-Jul-05 11:01 
GeneralConvert to VB.Net Pin
wsigns328-Jun-05 6:16
memberwsigns328-Jun-05 6:16 
Generali want to know where the size infomation works Pin
bestwsfz3j2-Jun-05 0:06
memberbestwsfz3j2-Jun-05 0:06 
Questionhow to get rid of padding below image Pin
lilon10-Mar-05 15:28
memberlilon10-Mar-05 15:28 
QuestionPolygonAreas? Pin
henkomannen22-Feb-05 21:48
susshenkomannen22-Feb-05 21:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web02 | 2.8.170525.1 | Last Updated 4 Jul 2002
Article Copyright 2002 by aalmada
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid