funded by

CyDAS General Controls: Image Map Overview

The image map components are used to provide a click-sensitive image for desk top applications. Some functionality was added to use these components also with web applications by translating the data into HTML code.

The image map needs four components:

an ImageMapArea corresponds to an "area" element in HTML code. It describes an area of an image and its properties (link, title, ...)
ImageMapData stores a list of ImageMapAreas and adds properties for the map (name, image URL,...)
the ImageMapControl is used on windows forms to display the image as a map.
an AreaSelectedEvent may be raised by the ImageMapControl when an area in the image was clicked. The AreaSelectedEventArgs contain a reference to the ImageMapArea element which was clicked.

How to employ the image map with your applications

If you want to use the image map functionality with your applications, follow the steps described below. The description uses a typical series of steps, but the order my be changed in some cases.

Get the Control

Get the CyDASGeneralControls dll. It is available from the DownLoad section under the GNU General Public License.

In your project, set a reference to this dll in the references section. You will then get an icon for the ImageMapControl in the "Windows Forms" section of the toolbox. This allows you to add the ImageMap to your forms like any other element.

Create the Map Data

The first step in your custom code is the creation of one ImageMapData object:

Dim oImageData As ImageMapData
oImageData = New ImageMapData()

Now you can add the bitmap (this can be done later on, too):

oImageData.Bitmap = New Bitmap("C:\myImage.jpg")

Create Area Elements

Next, the distinct areas of the image must be defined and added to the ImageMapData object:

Example 1: A rectangle in the upper left corner which is linked to "google" with the title "Search with Google":

Dim coords As Integer() = {0, 0, 100, 50}
Dim oArea As ImageMapArea
oArea = New ImageMapArea(ImageMapArea.Shapes.rect, coords, "http://www.google.com/", "", "Search with Google")
oImageData.addArea(oArea)

The empty Command property will be filled with the HREF property.

Example 2: A circle at (120;220) with radius 50 which will just show some tooltip:

Dim coords As Integer() = {120, 220, 50}
Dim oArea As ImageMapArea
oArea = New ImageMapArea(ImageMapArea.Shapes.circle, coords, "", "", "Just a tooltip")
oImageData.addArea(oArea)

Hints

Be careful with re-using the coords and the oArea objects: they are passed into the functions ByRef not ByVal, hence changing the properties of these objects may change the respective properties of the objects containing them. It is advisable to instantiate new coords and ImageMapArea objects for each area to be added.

Link the ImageMapData with the ImageMapControl

After the ImageMapData object received its image, the data are passed into the ImageMapControl

ImageMapControl1.Data = oImageData

At this step, the ImageMapControl will resize to the size of the bitmap.
If you do not want it to resize, set the AutoSize property to false:

ImageMapControl1.AutoSize = False

The control will automatically start the commands linked with the area elements. If you want to react on the selection of an area with your own code in the ImageMapControl1.AreaSelected event, set the AutoNavigate property is to false; you will get a reference to the selected area.

ImageMapControl1.AutoNavigate = False

Private Sub ImageMapControl1_AreaSelected(ByRef sender As Object, ByRef e As CyDASGeneralControls.ImageMapAreaSelectedEventArgs) Handles ImageMapControl1.AreaSelected
MsgBox("Area clicked: " & e.SelectedArea.Title)
End Sub