Lite Applets - The Image_and_Cursor Applet

Frank Wattenberg, Bart Stewart, and Suzanne Alejandre

Here again is the dynamic image from our front page. An example of its use may be found in Distances in Afghanistan, a student-ready module suitable for students in middle school through college who are studying distance or the Pythagorean Theorem. However, our point is not to show you our uses, but rather to get you to create your own.

You can use Image_and_Cursor in a curriculum module just like you would use an image. But this applet gives you more power than an ordinary image. If you click anyplace on the image, the cross hairs move to the point at which you clicked, and its coordinates appear at the upper right. You can fine-tune the position of the cross hairs by clicking on the four arrows -- above, below, to the left, and to the right of the image.

The applet can be used in many different ways in many different curriculum modules. For example -- as in Distances in Afghanistan -- students studying distance or the Pythagorean Theorem could determine the distance between Kabul and Kandahar by finding the coordinates (in pixels) of the two cities, applying the relevant formula, and then using the scale at the bottom of the map to determine the distance in either miles or kilometers. Or, a calculus instructor might introduce the idea of approximating the length of a curve using a polygonal path by asking students to determine the length of the border between Afghanistan and Iran.

Here is the HTML code for including this live image in a web page:

The color coding shows the four parameters that control the applet window (yellow) and the three that control the background image (violet). These are explained in more detail in the one-sheet instructions for this simplest use of the Image_and_Cursor applet, which you may open in a browser window or download as a Microsoft Word file file. In addition, you will need the following files to use this applet:

Save these files in the same directory as the HTML page in which you will use them. For practice, try this page. [That link will open another copy of this page in a frame that will not include extraneous JOMA codes.] There are several ways you can save an HTML page in a form that allows editing, depending on your operating system and browser. If you right-click in the text of the new copy (command-click on a Mac), you should see a menu that lets you select View source or something equivalent. The HTML source code will appear in whatever text processing program you use -- for example, Notepad on a Windows machine or TextEdit on Mac OS X. The code can be edited and saved in the application that opened it. You can also copy and paste selected portions of this file into HTML pages created with an HTML editor such as Dreamweaver or Front Page.

Lite applets can be easily customized. For example, it is easy to substitute another map or image by changing the file name in the backdrop_filename parameter and the dimensions of the both the applet and the image. Try it!

In the next section we discuss how to use lite applets with a spreadsheet or computer algebra system.