January 10, 2008 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.
How To
Create an image with solid colored regions. Bitmaps (Bmps) take up a lot of space, so using high quality Jpegs might be the better option. If you choose to use Jpegs, however, don’t use Microsoft Paint to save the Jpeg. The quality will not be good enough to create an image map. For my image map example, I used Adobe Photoshop Elements to save the Jpegs at the highest quality available.
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.
[begin]
input red
input green
input blue
print RGB(red, green, blue)
input again$
if again$ ="y" then [begin]endFunction RGB(red, green, blue)
RGB= red +(green *256)+(blue *65536)EndFunction
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. Colors that are not part of the clickable regions may be ignored or grouped together in a Case Else statment. Here's a code snippet of the scan process.
'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)
SelectCase 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
CaseElse'Non Body Part
Part$ = "0"
PUT #Body, PixelNumber
PixelNumber = PixelNumber + 1
EndSelectnext xVar
next yVar
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.
Function pixelLong(xVar, yVar)
hGBox = hWnd(#t.box)
hDC = hDC(hGBox)
Open"gdi32"for DLL as #gdi
CallDLL #gdi, "GetPixel",_
hDC as Ulong,_
xVar asLong,_
yVar asLong,_
pixelLong asLongClose #gdi
CallDLL#user32,"ReleaseDC", _
hGBox as Ulong, _
hDC as Ulong, _
result asLongEndFunctionFunction hDC(hGBox)
Open"user32"for dll as #user
CallDLL #user, "GetDC",_
hGBox as Ulong,_
hDC as Ulong
Close #user
EndFunction
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 Alyce for the use of her DLL for viewing jpegs, and I would like to thank Janet for her suggestions and tips.
marcuslee
Jan 10, 2008
Creating an Image Map
By: Mark Lee
January 10, 2008Download 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.
How To
Create an image with solid colored regions. Bitmaps (Bmps) take up a lot of space, so using high quality Jpegs might be the better option. If you choose to use Jpegs, however, don’t use Microsoft Paint to save the Jpeg. The quality will not be good enough to create an image map. For my image map example, I used Adobe Photoshop Elements to save the Jpegs at the highest quality available.
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.
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. Colors that are not part of the clickable regions may be ignored or grouped together in a Case Else statment. Here's a code snippet of the scan process.
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.
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 Alyce for the use of her DLL for viewing jpegs, and I would like to thank Janet for her suggestions and tips.
LIST ARTICLES HERE