As you work through this tutorial, you will be using several programs and windows. You will need to arrange the different windows on your screen to make it easy to move back-and-forth among them. One way to do this is to arrange them so that no window can be completely obscured by the other windows. Then you can make any window active at any time by clicking on its exposed portion.
Begin by clicking here to download a zip file (248 KB) with all the files you will need for this tutorial. Depending on how you have your browser and operating system set up, this file may automatically be unzipped or you may have to go through some steps manually to unzip it. When it is unzipped you will have a new folder (or directory) called Image_and_Cursor_All. Put this folder wherever you want to work. Make a note of where you put it.
Next open a new browser window. In that window open the file afghanistan_distances.html from your new directory. You should see a map of Afghanistan. It may take a few minutes to appear. There is a small chance it will not appear but give it a few minutes. If the map does not appear, open the file afghanistan_distances_alt.html from the same directory.
Take a few minutes to read this new page and answer the questions. When you are done, leave your new window open. You will need to return to it throughout this tutorial.
With this new window active choose Source from the View menu. Look for either of the following sections of html code in the source code. The only difference is whether you're working with afghanistan_distances.html or afghanistan_distances_alt.html. These are the lines of code that you need to put in your own html page to use this applet.
Keep the source window open. You will need to copy this code into the Web page you are about to create. By the way, this is a good trick. Whenever you see something in an html page that you would like to be able to do, you can view source and copy what the author did. In some cases you may need auxiliary files -- like Java applets or images. In our case the required files were included in the zip file.
Next open whatever program you use to create your own Web pages. Arrange the windows on your desktop so that you can easily move back-and-forth among them. You must create your new Web page in the folder Image_and_Cursor_All. Now create a simple Web Page with a few lines. When you are satisfied with your Web page, follow the instructions below to add the applet with the live map of Afghanistan.
Click at the place on your page where you want to put the live map of Afghanistan. You will need to work with the html code. If you are writing html with a simple text editor, you're already working with the html code. If you are working with Dreamweaver, Front Page or another program you need to find and work with the html code. In Front Page you click the html tab. In Dreamweaver you choose Code and Design from the View menu. Locate the place in the html code that corresponds to the place you want the map of Afghanistan to appear. With most Web editors, the cursor should be at or near that place. Click at the place you've found in the html code. Now return to the source code that we looked at earlier and locate whichever of the two block of html code above appears. Copy the entire block and paste it in your own Web page. Be sure to paste it in the html code at the place you found earlier. Congratulations!! You've just written a Web page using this applet. Save it and try it.
If your new page works then you are ready to modify it. Note that you can copy portions of the code in the source window into your new Web page. This is a powerful technique. You can copy other things in this way. Of course, you must respect copyright and intellectual property rights. You are welcome to use anything from the Lite Applets Collection for noncommercial purposes.
Now you can close all the open windows except this window and the window(s) for your Web editor. The next step is to substitute a different map or another image of your own choosing for the map of Afghanistan. If you have an image (gif or jpeg) you would like to use -- great!! Locate that image. Otherwise click here to go to a CIA site (government agencies are good places to look for material that is in the public domain) with a library of maps. Follow the directions to choose a country. When you find a map you would like to use download it in the usual way. Depending on your operating system and browser you may do this by double-clicking, right-clicking, shift-clicking, or CTRL-clicking the map. Save the map in the folder Image_and_Cursor_All. Note its name (be careful of upper and lower case). You will also need to know the dimensions (width and height in pixels) of the map. You can find this out in many browsers by opening the image file in a new window. Or, you can use your favorite image-processing program.
Next we need to modify your applet code to give the applet the information needed for this new image. Make a copy of your earlier Web page in the folder Image_and_Cursor_All and give it a new name. Work with this new file. As before, you will be working with one of the two blocks of code below in your html page.
The key elements of the code are highlighted. They are parameters passed by the html code to the applet. Notice that three parameters are highlighted in blue. These three parameters provide the necessary information about the image -- its file name, its width in pixels, and its height in pixels. Change these parameters to the appropriate values for your new image. Be careful about case in the file name. If your new image is no bigger than the original image this is all your really need to do. If the new image is larger than the old image or it is smaller and you want to save space on your html page then you need to change the four elements highlighted in red. These four elements indicate the width and height of the region on the html page that is occupied by the applet. Notice each of these pieces of information is repeated twice. Change then so that the width is 149 pixels wider than the new image and the height is 80 pixels taller than the new image.
Congratulations!! You have just customized your module by substituting a new image. Save this file and try it.
You are now ready to write your own modules using the Lite Applet Image_and_Cursor or to modify the modules included in the Lite Applet Collection. This applet is much more powerful and flexible than we have seen so far. Subsequent tutorials show how to use some of its additional features and the User's Manual (1.1 MB) describes all of its features.