Click here to Skip to main content
Click here to Skip to main content

C# Windows Forms ImageMap Control

, 31 Aug 2002
Rate this:
Please Sign up or sign in to vote.
An ImageMap control for use in Windows Forms applications

Mouse hovering on red polygon  Mouse clicked on white rectangle

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.

private int getActiveIndexAtPoint(Point point)
{
    System.Drawing.Drawing2D.GraphicsPath path = new System.Drawing.Drawing2D.GraphicsPath();
    System.Drawing.Drawing2D.GraphicsPathIterator iterator = 
                new System.Drawing.Drawing2D.GraphicsPathIterator(_pathData);
    iterator.Rewind();
    for(int current=0; current < iterator.SubpathCount; current++)
    {
        iterator.NextMarker(path);
        if(path.IsVisible(point, this._graphics))
            return current;
    }
    return -1;
}

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:

<!--Text BUTTON-->
   <area shape="rect" coords="140,20,280,60">

<!--Triangle BUTTON-->
   <area shape="poly" coords="100,100,180,80,200,140">

<!--Face BUTTON-->
   <area shape="circle" coords="80,100,60">

Here are the equivalent regions defined using this control:

this.imageMap1.AddRectangle("Rectangle", 140, 20, 280, 60);
this.imageMap1.AddPolygon("Polygon", new Point[] {new Point(100, 100), 
                          new Point(180, 80), new Point(200, 140)});
this.imageMap1.AddElipse("Ellipse", 80, 100, 60);

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.

A list of licenses authors might use can be found here

Share

About the Author

Ryan LaNeve
Web Developer
United States United States
No Biography provided

Comments and Discussions

 
GeneralWhat nice work PinmemberMember 81340333-Aug-11 9:24 

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
Web04 | 2.8.141022.2 | Last Updated 1 Sep 2002
Article Copyright 2002 by Ryan LaNeve
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid