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

Tagged as

Go to top

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

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

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 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
 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

License

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

Share

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;
Traveller;

Comments and Discussions

 
GeneralMy vote of 5 PinmemberMonjurul Habib28-Feb-11 20:13 

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
Web02 | 2.8.140926.1 | Last Updated 25 Feb 2011
Article Copyright 2011 by Sergio Mach
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid