marcuslee
Jan 10, 2008
=Creating an Image Map= ===By: Mark Lee=== January 10, 2008 [[http://www.geocities.com/msl_007/ImageMapProgram.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. ==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. [[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. 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. [[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. [[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]] for the use of her DLL for viewing jpegs, and I would like to thank [[http://www.janetterra.com/|Janet]] for her suggestions and tips. ---- [[#list]] **LIST ARTICLES HERE** * [[Scientific precision]] - by Grahame King - ADDED TO NUMBERS AND MATH [[user:Alyce|1156422124]] * [[file.operations|copying,moving,deleting and renaming files]] - by Alex Barfoot - added to Using Files, Windows API [[user:Alyce|1156793631]] * [[Listview, trapping double click]] - by Eldron Gill - Added to Windows API [[user:JanetTerra]], October 10, 2006 * [[CryptographyWithLB102]] - by Cryptoman - Added to Strings and Text [[user:JanetTerra|1161815650]] * [[A True API Popup Menu - By Duncan B]] - added to Windows API [[user:Alyce|1174581409]] * [[Calculating the Value of PI]] - By Frank West added to Numbers and Math [[user:Alyce|1180528538]] * [[Running a LB program from the System Tray]] - By Duncan B. (added to Advanced Tutorials by [[user:Alyce]] ) * [[TOE Charts|Programming Using TOE Charts]] - By Noble D. Bell (added to General tutorials by [[user:Alyce]] ) * [[Sprite Boundary Detection Tip]] - By Ben Jimenez - Added to Graphics and Games > Sprite Games [[user:JanetTerra]] * [[Managing Multiple Windows]] - By Harmon V. * [[Byte Mode Programming]] - Added to General Tutorial [[user:Alyce]] * [[Indexed Random Access in Native LB]] [[user:Alincon2001]] - added to [[uncategorized|Uncategorized Contributions]] * [[Creating and Image Map]] - by Mark Lee