Using Testmode             

After following the instructions in Getting Started and opening your HTML document in your browser, you should see your image displayed, as in the example below.

As you move the pointer over the image, you'll see your current coordinates displayed in the status-bar: if you know there's a particular point on the image at which you want an Area's top-left corner to be, these coordinates will make it easy to locate it.

<APPLET CODE="ryProMap.class" WIDTH=480 HEIGHT=360>
<param name=Copyright value="ProMap (c) 1997 Cool Focus [www.coolfocus.com]">
<param name=Testmode value="yes">
<param name=BaseImage value="Adams.jpg">
<param name=BorderColor value="999999">
</APPLET>

When you've decided where you want to define an Area, click the mouse at the top-left point of that part of the image and drag the mouse downwards and to the right. As you do so, a boxed display will show four coordinates followed by the current width and height of the rectangle you're drawing. Try drawing a rectangle around the apple in the applet above. You should end up with something like the screenshot below:


[screenshot]

Depending on the colors in your image, the outline you draw may not be visible. If so, re-edit the BorderColor parameter to enter a different hex color, resave the document and refresh your browser.

If you're not happy with the area you've drawn, simply click and drag again to draw another. The text display will change when you click the applet again.

Taking the above screenshot as an example, if you want to define this rectangle as an Area, add the following parameter to your HTML code:

<param name=Area1 value="338,251,417,333">
by copying the four coordinates from the text display. The width and height in parentheses are included just for your information in cases where you need to define an Area of a precise size. Note that the first Area you define must be in a parameter named Area1. Any subsequent Areas can be numbered with anything from 2 to 50: there's no requirement for numbering to be consecutive.

After entering this parameter into your document, resave it and refresh your browser. You'll now see something like the following screenshot, indicating the currently defined Areas and their numbers (only one so far):


[screenshot]

Continue to follow the previous steps to draw another Area, copy its coordinates into a new Area parameter in your code, resave and refresh, until your code contains all the Area parameters you want to define. Note that Areas may overlap, but if one Area is completely covered by another it will be impossible to select it. Where Areas do overlap, only one Area at a time can ever be selected. When you're done, your applet might look something like this:

<APPLET CODE="ryProMap.class" WIDTH=480 HEIGHT=360>
<param name=Copyright value="ProMap (c) 1997 Cool Focus [www.coolfocus.com]">
<param name=Testmode value="yes">
<param name=BaseImage value="Adams.jpg">
<param name=BorderColor value="999999">

<param name=Area1 value="338,251,417,333">
<param name=Area2 value="171,129,214,204">
<param name=Area3 value="63,130,115,347">
<param name=Area4 value="408,270,462,334">
<param name=Area5 value="436,78,472,115">
<param name=Area6 value="224,127,455,245">
<param name=Area7 value="126,18,258,88">
</APPLET>

It's worth remaining in Testmode for a while longer, and entering a Message parameter for each area while the Area numbers still appear on the screen. Without the numbers to help you, it might be hard to remember which Area is which when you switch off Testmode, so enter a descriptive Message for each, even if you want to change it later or turn off the display of Messages.

Finally, follow steps 5 and 6 in Getting Started to add the finishing customization touches and URLs to the applet.