Introduction

So you need to make an image map which is sectioned into area elements? Read further now for an explanatory automated process of getting it absolutely right, including coordinates for a two color mapping imagery.

Background

This process is already used in some web sites including www.homegence.com - in the first image map that appears.

Using the Code

My method (use your imagination for yours) is to put all map image files in one directory:

Dim files As IO.FileInfo() = _
  (New IO.DirectoryInfo(Application.StartupPath)).GetFiles("*.png")

Here is an example picture:

Out goes the header information:

sOut += String.Format("<map name={0}shapes{0} id={0}shapes{0}>" & vbCrLf, Chr(34)) 

Now, for each file - that is map section, check pixel by pixel color change, and when a color change is detected to your prominent color, the coords x,y pair value gets saved to the end of the string sPolyCoords:

Dim bitmap1 As New Bitmap(fileVar.Name)
Dim py As Integer : Dim px As Integer : Dim pt As New Point(0, 0)
Dim pxColor As New Color() : Dim lastColor As New Color()
For py = 0 To bitmap1.Height - 1
 For px = 0 To bitmap1.Width - 1
  pxColor = bitmap1.GetPixel(px, py)
  If lastColor <> pxColor And isColorComponentUniqueR(pxColor) Then
   sPolyCoords += px.ToString & "," & py.ToString
  End If
 lastColor = pxColor
 Next
Next

Simple logic, I guess. Any questions ...?

So now, out goes the area element, and all the functionality associated with the particular map section (tooltips, hrefs, etc.):

sOut += String.Format("<area id={0}{1}{0} shape={0}poly{0} " & _ 
  "coords = {0}{2}{0} onmouseover={0}alter('imgMap','images/{3}'){0} " & _ 
  "onmouseout={0}alter('imgMap','images/{4}'){0}/>" & _
  vbCrLf, Chr(34), sFilePoly, sPolyCoords, imageOnMouseOver, imageOnMouseOut)

Again, simple programming. Of course, you can add a mile of functionality here...

I haven't detailed the out stream for the sOut variable because I wanted to keep it simple (the reader can go for the text out or file replacement, etc.).

Finish the cycle for all the map sections and close the map element:

sOut += "</map>" & vbCrLf  

Finally, declare your img element positioning and references:

sOut += String.Format("<img id={0}imgMap{0} name={0}imgMap{0}" & _ 
                      " usemap={0}#shapes{0} src={0}.png{0}/>",Chr(34))  

Points of Interest

Now you can let designers change their image mappings - you will have the perfect free tool for extracting all those line coordinates, promptly and safely. Further implementations and updates to the article will explore how to transpose it to a multicolor mapping.

History

• 2011.01: Version 1.0 :: Two color image mapping HTML Element.