Submit

Edit 209 …
Older Version Newer Version

marcuslee marcuslee Jan 10, 2008

Review Changes
Revert to This Version

Submit Articles Here for Liberty BASIC Programmer's Encyclopedia Creating an Image Map

Liberty BASIC Programmer's Encyclopedia Anybody can submit articles to the Liberty BASIC Programmer's Encyclopedia. You do not need to

By: Mark Lee

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 a member of Wikispaces or of this site. License By adding content to the Liberty BASIC Programmer's Encyclopedia, you are bound by the license. 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.

external image 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. 

 [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

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 want to release 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) 
 
 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

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

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 work under this license, do not submit articles. Click HERE to read the License. Article Guidelines imagination.

The Liberty BASIC Programmer's Encyclopedia is a place for full-length technical articles. Authors should make sure that articles are well-structured, that words are spelled correctly, and that all code works properly. Click HERE for help on technical writing. When you submit an article, be aware this is not the end of your involvement. Few of us get it Just Right the very first time. Expect an LBPE editor to contact you with questions, suggestions, possible edits, etcetera for you to look over and take the proper action. Adding Articles Click the edit button Image Scan program included in the download at the top of this page. Add your article to the list at the bottom 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 this page by typing a name her DLL for your page inside of double square brackets. If your article is called "Using Arrays", your link viewing jpegs, and I would look like this: * [[Using Arrays]] Save the editing of this page. View this page to thank Janet for her suggestions and click on the link you just created. On the new page, click the edit link and type or paste your article. Please place your name and the date at the top of your article, along with a descriptive title. Save your edits. That's all there is to it! Editing Articles To learn how to use WikiText markup to edit site content, click HERE. You don't need to know WikiText, though. When you are editing a page, there is a button near the bottom to "Use Visual Editor." If you want to try some editing in a safe place where you can do no harm, play in the Test Area . Before finalizing the article, you can click the "Preview" button to see how your article will appear, and make changes as needed. Additional Files If your article requires images or other additional files, simply upload them and include links in your article. When you are editing a page there is a link in the upper right for "Images". Click this to view a list of all available files and images. Article Placement One of the organizers of the Liberty BASIC Programmer's Encyclopedia will tag your article for editing. If the organizers find it to be a viable article for the encyclopedia, it will be added to the all appropriate categories. Confirmation Organizers of the Liberty BASIC Programmer's Encyclopedia will make any modifications they feel are needed. Authors may accept or reject these changes before articles are listed in the appropriate categories and locked. Article Modification in the Future One of the advantages of this format is that it affords us the ability to update and modify the information. Organizers reserve the right to modify, expand, or delete articles as they determine such actions to be appropriate. Who Can Edit Articles Articles can be edited by the original authors and by the site organizers. Others should suggest changes via the site's dicussion feature. tips.




LIST ARTICLES HERE