Creating an Image Map

=Creating an Image Map= 
===By: Mark Lee=== 
January 10, 2008
[[http://www.geocities.com/msl_007/ImageMapProgramv2.zip|Download]] a zip file containing an example

An image map is a picture with clickable regions. Image maps are typically found on WebPages as navigational tools, allowing users to click on pictures or sections of a picture to go to other pages. But, an image map can be used for a lot of other things.

==A Few Examples== 

An image map could be used to simulate irregularly shaped buttons.

An image map could be used in a point and click type game, such as the popular Nancy Drew series. The player would navigate rooms, pick up objects, dial numbers on a cell phone, etc ... just by clicking the right region of the pictures.

Any map could be used to learn geography. The program would ask the user to locate something on the map, and the user would simply click in the right region.

Young kids could learn their body parts by clicking on an image of the human body.  This demo shows such an application.

==How To Create an Image Map== 
= = 
Create an image with solid colored regions. Bitmaps (.bmp) take up a lot of space, so using a compressed format may be the better option. Either .gif or /png.png would be an appropriate choice. Since native Liberty BASIC only supports bitmaps, a 3rd party dll is required for loading another image format. I used [[http://alycesrestaurant.com/dll.htm#pbimage|PBImage DLL]] by Dean Hodgson to load a png file.

[[image:http://www.geocities.com/msl_007/Body.jpg]]

The next step is to convert the RGB color codes of the solid color regions to single numbers, which are used by windows to read pixel values. I used the following code to do this.

[[code format="php"]]
[begin]
input red
input green
input blue
print RGB(red, green, blue)
input again$
if again$ = "y" then [begin]
end
Function RGB(red, green, blue)
 RGB= red + (green * 256) + (blue * 65536)
End Function
[[code]]

Now, write a program to scan your image, indexing the color of each pixel in the clickable regions. Store this information in a Random Access File database. The clicked color is then compared to the stored colors in a Select Case routine.  Colors that are not part of the clickable regions may be ignored or grouped together in a Case Else statment. The following code snippet differs slightly from the code in the download, but it demonstrates the scan process.

[[code format="vb"]]
'index the pixels
PixelNumber = 1
for yVar = 0 to 629 'Cycle through the height of the image to be scanned
for xVar = 0 to 319 'Cycle through the width of the image to be scanned

 pixelLong = pixelLong(xVar, yVar)

Select Case pixelLong

 Case 8421504 ' Face

Part$ = "1"
 PUT #Body, PixelNumber
 PixelNumber = PixelNumber + 1

 Case 16711553 ' Neck

 Part$ = "2"
 PUT #Body, PixelNumber
 PixelNumber = PixelNumber + 1

 Case 16512 ' Shoulders

 Part$ = "3"
 PUT #Body, PixelNumber
 PixelNumber = PixelNumber + 1

 Case 16646144 'Chest


 Part$ = "4"
 PUT #Body, PixelNumber
 PixelNumber = PixelNumber + 1

 Case 254 ' Arms

 Part$ = "5"
 PUT #Body, PixelNumber
 PixelNumber = PixelNumber + 1

 Case 131071 ' Hands

 Part$ = "6"
 PUT #Body, PixelNumber
 PixelNumber = PixelNumber + 1

 Case 16711807 ' Stomach

 Part$ = "7"
 PUT #Body, PixelNumber
 PixelNumber = PixelNumber + 1

 Case 16744448 ' Hips

 Part$ = "8"
 PUT #Body, PixelNumber
 PixelNumber = PixelNumber + 1

 Case 98304 ' Legs

 Part$ = "9"
 PUT #Body, PixelNumber
 PixelNumber = PixelNumber + 1

 Case 8388863 ' Feet

 Part$ = "10"
 PUT #Body, PixelNumber
 PixelNumber = PixelNumber + 1

 Case Else 'Non Body Part

 Part$ = "0"
 PUT #Body, PixelNumber
 PixelNumber = PixelNumber + 1

 End Select

next xVar
next yVar

[[code]]

Such a program may run for several minutes to index large pictures. It took my computer about 8 minutes to index a little more than 200,000 pixels. (That’s a 320 x 630 size image.)

The use of a few API/DLL calls, including the GetPixel function, will be required.  It is also necessary to retrieve the device context of the graphic box.  Release that device context before exiting the program to free memory.

[[code format="vb"]]
Function pixelLong(xVar, yVar)

 hGBox = hWnd(#t.box)
 hDC = hDC(hGBox)

 Open "gdi32"for DLL as #gdi

 CallDLL #gdi, "GetPixel",_
 hDC as Ulong,_
 xVar as Long,_
 yVar as Long,_
 pixelLong as Long

 Close #gdi

 CallDLL#user32,"ReleaseDC", _
 hGBox as Ulong, _
 hDC as Ulong, _
 result as Long

End Function


Function hDC(hGBox)

 Open "user32" for dll as #user
 CallDLL #user, "GetDC",_
 hGBox as Ulong,_
 hDC as Ulong

 Close #user

End Function
[[code]]

Each clickable region can have a separate picture associated with it. The new picture may replace the old picture when the mouse moves over the region or when a mouse button is either pressed or released. For that matter, a different picture could be triggered with each of the mentioned events. Options at this point are only hindered by your imagination.

The Image Scan program included in the download at the top of this article demonstrates the scan step, and the Image Map program demonstrates using the stored information to simulate an image map.

I would like to thank [[http://alycesrestaurant.com/|Alyce Watson]] for the API and GDI knowledge she so generously shares, Dean Hodgson for the DLL used in my code example, which can be downloaded from [[http://alycesrestaurant.com/dll.htm#pbimage|PBImage DLL/|Alyce's[[http://alycesrestaurant.com/dll.htm#pbimage||Alyce's site]], and I would like to thank [[http://www.janetterra.com/|Janet]] for her suggestions and tips.