Introduction

I noticed a few requests on various newsgroups for an image map control which could be used in a Windows Forms application.
I had not worked much with the System.Drawing namespace, so I decided to give it a try. This control is the result.

How It Works

The control uses a standard PictureBox control internally, specifically it's ability to load and display an
image as well as it's inherited MouseMove, MouseLeave, and Click events. A ToolTip
component is used as well to display tooltips for defined regions. Currently, the key specified for a region is
used for the tooltip text, though it would be pretty easy to allow an additional "tooltip" property to be
assigned for each region.

The bulk of the logic is in the private getActiveIndexAtPoint method shown below. The method is called whenever
the mouse moves within the control to determine which region, if any, the mouse is within. If the mouse is within a region, the
region's index is returned by the method. This index is used to lookup the region's key, which is then used to set the text
displayed by the tooltip. The cursor is also changed to a hand and the index is stored in a private property to be re-used if
the mouse is clicked, avoiding the necessity to call this method again. If the method does not find a region, a -1 is returned
and the cursor is set to it's default.

How To Use It

You can add this control to your toolbox just as you would any other .NET control. Once, added, simply drag-and-drop an
instance of the control onto your form. Use the Image property to assign the desired image to the control.

Once you've added the control to your form, you can begin to call the various Add- methods to define the "hot-spots"
within your image. The available methods are AddEllipse, AddRectangle, and AddPolygon.
I tried to follow the conventions of HTML image maps with respect to defining the various shapes, and I overloaded the
AddElipse and AddRectangle methods to accept ".NET-friendly" types such as Point
and Rectangle. Since the methods follow the convention of HTML image maps, you should be able to use any existing image map generation
software to determine exactly what points to specify for the desired regions within your image.

Here is the code required to define an HTML image map using the image in the first screenshot:

The control will raise an event - RegionClick - whenever the mouse is clicked within a defined region.
The event passes two values denoting the index and the key of the clicked region. You would then take whatever action you
wished based on the region clicked.

That's it! I hope this meets the needs of those who had requested an image map control for use in a Windows Forms
application. Comments and requests are welcome.

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.

I am working on c# desktop Application in which I want image editor functionality like I have image and on it I want draw circle rectangle ,arrow and ellipse . I am able to draw it but only once at a time . if i select circle than i cant draw circle more than one and other also like rectangle ,arrow
. for this I took refrence of cropcircle test application.

on mouse down that is replacing previus value to new . how can i REMOVE THIS PROBLEM....
SUGGEST me any test application.

I am using GraphicsPath.IsVisible(point pt) method to find if the point of click is withing the region or not. However when I am using it in run time application, the method is behaving correctly but when using the same method in design time application, though the point lies inside the GraphicsPath region is returns false.

Is there any limitaion with the IsVisible method that it can't be used in design time.

this code is very helpful ! but i tried this example by changing the image and then i tried adding a rectangle to tht image programmatically on mouse events it adds the rectangle but the rectangle is not visible.... is there any way to assign color to rectangle just the boudary so tht it would be visible...how do i do that?

The primary reason was to maintain as much similarity with HTML image maps as possible. Of course, by that token, the "AddElipse" should have been called "AddCircle", since that's really the only type of elipse it supports, and I should have added an "AddElipse" which accepts a starting point, width, and height.

In any case, the elipse/circle is not defined by a set of points, as the rectangle and polygon are. Your suggested method signature of Add(Shapes., params Point[] points) would therefore not work for an elipse. Also, using the control becomes less intuitive with a generalized "Add" method, since it a) wouldn't work for all shape types, and b) would allow for invalid calls to be made, such as a call to add a rectangle with less than 4 points defined. Of course that can be caught by the control, but why bother? With the "AddRectangle" method, it's quite clear what values are required in order to successfully add a rectangle.

But to each his own - it's a very simple control and quite easy for someone to customize.

Okay, you have a valid point about circles and ellipses, but I still don't see why you pass the name of the shape as a string. It's redundant. Just get rid of that and leave the others you have. When you call AddRectangle, you already know that you're adding a rectangle.

Actually, the first parameter for each of the Add methods is the key used to identify the shape being added, which is passed back in the click event. I merely chose - very poorly - to use the name of the shape as it's key, which I could get away with since I had only one of each type of shape. In other words, my rectangle shape's key is being set to "Rectangle". When that shape is clicked, the key value of "Rectangle" will be provided in the click event. I really should have chosen better names for the example shapes' key values.