Click here to Skip to main content
11,928,786 members (54,823 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


7 bookmarked

Prepare an HTML Document with the MAP Element and AREA in VB.NET for Two Color Image Maps

, 25 Feb 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Map two color images to an HTML file with MAP elements


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.


This process is already used in some web sites including - 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 get 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

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.


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


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sergio Mach
Software Developer (Senior)
Portugal Portugal
Financial Apps addict since early programming ages;
Statistical Apps writer;
Computer gamming and graphics programmer with a 2 commercial titles: Armor PC/PPC, MidWay XBOX/PC/PPC;
Manic Basketball fan and player;

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
Monjurul Habib28-Feb-11 21:13
memberMonjurul Habib28-Feb-11 21:13 
nice one !

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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.151126.1 | Last Updated 25 Feb 2011
Article Copyright 2011 by Sergio Mach
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid