Introduction

Map Designer is an utility to simplify creation of images having many clickable areas on your WEB pages.

It takes just a moment to create your own hypergraphic image!

Built-in easy to use HTML editor helps you to manage a html code obtained.

Features:

- BMP, JPEG, GIF and PNG graphic formats are supported
- Client-side maps and Server-side maps (CERN and NCSA) are supported
- Customized friendly user interface
- Simple access to marked area you want
- Adjustable areas sequence (for the overlaped areas)
- Built-in easy-to-use HTML editor
- Cut, copy and paste
- Supports moving and reshaping of Polygons.
- User-definable Snap To Grid
- User-definable fill pattern and colors for the areas
- Tags and events: ALT, TARGET, OnMouseOver, OnMouseOut are supported
- Ability to make area of any form you want
- Fast testing the results obtained
- Any suggestion?


Menu commands

About Image Maps
Image maps are images on a Web site that contain multiple links to other files. Different areas of an image map, called hot spots, link to different URLs. Image maps can contain links to text files; other images; audio, video, or multimedia files; other pages in the Web site; or other Web sites. The hot spots cannot extend beyond the edges of the image. (see Client-side image maps for details)

Image maps are similar to slices in enabling you to link an area of an image to a URL (see ForthTech Image Splitter for example). However, image maps offer the advantage of enabling you to link circular, polygonal, or rectangular areas in an image, while slices enable you to link only rectangular areas. (If you need to link only rectangular areas, using slices may be preferable to using an image map).


Menu commands

Client-Side Image Maps

(© Eric Ladd and Jim O'Donnell "Using HTML 3.2, Java 1.1, and CGI")

Having the server do the work of finding out where the user clicked and where to send the user based on the click, involves a lot of wasted resources. The client has to open another HTTP connection to the server to pass the coordinates and get the response back regarding what URL to load next. The computations the server has to do to find out what hot region the user clicked are straightforward, and there's no reason they can't be done by the client. Slow transmission times between client and server mean that users may have to wait quite a while from the time they click the mouse to the time the new URL is loaded.

Until recently, the compelling reason for having the server do the image map computations was that the map file data resided on the server. If there were a way to get this information to the client, then the client could do the computations and the image map process would become much more efficient. This is the spirit behind client-side image maps.

Client-side image maps involve sending the map data to the client as part of the HTML file rather than having the client contact the server each time the map data is needed. This process may add to the transfer time of the HTML file, but the increased efficiency is well worth it.

Advantages

The movement toward client-side image maps has been fueled by the promise of a number of advantages, which include:

  • Immediate processing Once the browser has the map file information, it can process a user's click immediately instead of connecting to the server and waiting for a response.
  • Offline viewing of Web pages If you're looking at a site off a hard drive or a CD-ROM drive, there's no server at all to do any image map computations. Client-side image maps allow image maps to be used when you're looking at pages offline.
  • No special configurations based on server program Client-side image maps are always implemented the same way. You don't need to format the map data differently, depending on whether a server expects CERN or NCSA image maps, because there's no server involved.

Previously, the only disadvantage of using client-side image maps was the fact that it wasn't standard HTML and, therefore, not implemented by all browsers. Now that client-side image maps have been adopted as part of HTML 3.2, you can expect those graphical browsers that do not yet support them to come into compliance fairly quickly.

Defining a Map

A client-side image map is defined using HTML tags and attributes, usually right in the HTML file that contains the document with the image map. The map data is stored between the <MAP> and </MAP> container tags. The <MAP> tag has the mandatory attribute NAME, which is used to give the image map data a unique identifier that can be used when referencing the data.

Inside the <MAP> and </MAP> tags, hot regions are defined by stand-alone <AREA> tags-one <AREA> tag for each hot region. The <AREA> tag takes the attributes shown in Table 9.3.

Table 9.3 Attributes of the <AREA> Tag

Attribute | Purpose
ALT | Provides a text-based alternative to the hot region
COORDS | Lists the coordinates of points needed to define the hot region
HREF | Supplies the URL to be associated with the hot region
NOHREF | Specifies that there is no URL associated with the hot region
SHAPE | Set equal to the keyword (rect, circle, poly, and default) that specifies the shape of the hot region
NOTE

The point keyword is not supported in HTML 3.2.

For example, the triangle link set up during the discussion of server-side image maps would take the following form as a client-side image map:

<MAP NAME="triangle">
<AREA SHAPE="poly" COORDS="133,256,42,378,298,172"
HREF="http://www.your_firm.com/triangle.html" ALT="Triangle Link">
</MAP>

The preceding HTML sets up a map named "triangle" that has one hot region. Note that the numbers in the list of coordinates for the COORDS attribute are all separated by commas and that the URL in the HREF attribute is fully-qualified.

The <AREA> tag can also take a NOHREF attribute, which tells the browser to do nothing if the user clicks on the hot region. Any part of the image that is not defined as a hot region is taken to be a NOHREF region, so if users click outside a hot region, they don't go anywhere by default. This approach saves you from setting up an <AREA SHAPE="DEFAULT" NOHREF> tag for all your maps.

NOTE

You can have as many <AREA> tags as you like. If the hot regions defined by two <AREA> tags overlap, the <AREA> tag that is listed first gets precedence.

Setting Up the Image Map

With the image map data set up in HTML form, you next need to set up the image map itself. To do this, you just use the <IMG> tag along with the USEMAP attribute. USEMAP tells the browser that the image to be used is a client-side image map and that it is set equal to the name of the map that contains the appropriate map data. For the client-side image map defined above, the setup would look like:

<IMG SRC="images/mainpage.gif" USEMAP="#triangle">

The pound sign (#) before the map name indicates that the map data is found in the same HTML file. If the map data is in another file called Maps.html (which is perfectly okay), your <IMG> tag would look like the following:

<IMG SRC="images/mainpage.gif" USEMAP="http://www.your_firm.com/maps.html#triangle">

Storing all your maps in a single file is a good idea if you're placing the same image map on several pages. This way, if you need to make a change, you have to make it in only one file rather than in every file where the map is referenced.

TIP

If you have standard navigation image maps on your site, you should consider storing the map data for them in a single HTML file for easier maintenance.
NOTE

Netscape has extended the <AREA> tag to include the TARGET attribute so that you can set up an image map to load a page into a named frame in a framed document.

Example: A Main Page Image Map

To set up the map information to make the image in Figure 9.1, a client-side image map, you could use the following HTML:

<MAP NAME="main">
<AREA SHAPE="rect" COORDS="6,7,102,86"
HREF="http://www.your_firm.com/geninfo.html" ALT="General Information">
<AREA SHAPE="circle" COORDS="283,118,320,155"
HREF="http://www.your_firm.com/press.html" ALT="Press Releases">
<AREA SHAPE="polygon"
COORDS="77,181,59,142,156,145,156,233,134,213,79,233,30,206"
HREF="http://www.your_firm.com/annrept.html" ALT="Annual Report">
</MAP>

Then, to set up the image map, you would use

<IMG SRC="images/main.gif" USEMAP="#main">

if the map information were in the same file. If the map information were stored in the file maps.html, you would modify the preceding <IMG> tag to read as

<IMG SRC="images/main.gif" USEMAP="http://www.your_firm.com/maps.html#main">

Example: A Navigation Image Map

To use the image in Figure 9.2 as a client-side image map, you first need to set up the map information in an HTML file:

<MAP NAME="navigate">
<AREA SHAPE="rect" COORDS="18,1,108,33"
HREF="http://www.your_firm.com/geninfo.html" ALT="General Information">
<AREA SHAPE="rect" COORDS="129,1,194,33"
HREF="http://www.your_firm.com/press.html" ALT="Press Release">
<AREA SHAPE="rect" COORDS="214,1,277,33"
HREF="http://www.your_firm.com/annrept.html" ALT="Annual Report">
<AREA SHAPE="rect" COORDS="300,1,369,33"
HREF="http://www.your_firm.com/findata.html" ALT="Financial Data">
<AREA SHAPE="rect" COORDS="382,1,485,33"
HREF="http://www.your_firm.com/jobs.html" ALT="Job Opportunities">
<AREA SHAPE="rect" COORDS="507,1,581,33"
HREF="http://www.your_firm.com/calendar.html" ALT="Calendar of Events">
</MAP>

With the map data in place, you can reference it with the <IMG> tag:

<IMG SRC="images/navigate.gif" USEMAP="#navigate">

if the map data is in the same HTML file. Since the same navigation maps are often used on several pages on a site, you might want to put the map data in a single map file and reference the file each time you need the map:

<IMG SRC="images/navigate.gif" USEMAP="maps.html#navigate">

As noted earlier, this is an efficient way to manage image maps that are common to many pages.


Menu commands

Server-Side Image Maps

(© Eric Ladd and Jim O'Donnell "Using HTML 3.2, Java 1.1, and CGI")

A server-side image map is one in which the server determines which document should be loaded, based on the user's click on the image map. To make this determination, the server needs the following:

  • The coordinates of the user's click This information is passed to the server by the client program.
  • A program that takes the click coordinates as input and provides an URL as output Most servers have a routine built in that handles this task.
  • Access to the information that defines the hot regions and their associated URLs This information is critical to the processing program that checks the hot regions to see if the user's click corresponds to an URL. When the program finds a match, it returns the URL paired with the clicked hot region. The file on the server that contains this information is called a map file.

Additionally, you need two other "ingredients" to complete a server-side image map:

  • An image An image map is like any other graphic in that you need to have a GIF or a JPEG file that contains the image.
  • Proper set-up in your HTML file When you place the image map graphic, you use the <IMG> tag with a special attribute to alert the client program that the image is to be used as a server-side image map.

As an HTML author, you need to be most concerned about two of the items listed above: the map file and the setup in the HTML file. These two aspects of creating an image map are discussed in the next two sections.

Preparing the Map File

The map file is a text file that contains information about the hot regions of a specific image map graphic. For this reason, a separate map file is necessary for each image map graphic you want to use. The definition specifies the type of region located in the graphic as either a rectangle, circle, polygon, or point.

These regions, as their names suggest, refer to the geometric shape of the hot region. Their defining coordinates are determined as pixel points relative to the upper left corner of the image map graphic, which is taken to have coordinates (0,0). The following list identifies basic image map shape keywords and their required coordinates:

  • rect This keyword indicates that the hot region is a rectangle. The coordinates required for this type of shape are the upper left and lower right pixels in the rectangle. The active region is the area within the rectangle.
  • circle This keyword indicates that the region is a circle. Coordinates required for using a circle are the center-point pixel and one edge-point pixel (a pixel on the circle itself). The active region is the area within the circle.
  • poly This keyword indicates that the hot region is a polygon. Coordinates are required as a list of vertices for the polygon. A polygon region can contain up to 100 vertices. The active region is the area within the polygon.
  • point This keyword indicates that the region is a point on the image. A point coordinate is one specific pixel measured from the upper left corner of the image map graphic. A point is considered active if the click occurs closest to that point on the graphic, yet not within another active region.
  • default This keyword indicates all areas of an image map graphic that are not specified by any other active region.
TIP

An image map definition file should, whenever possible, be configured with a default HTML link. The default link takes the user to an area that isn't designated as being an active link. This URL should provide the user with feedback or helpful information about using that particular image map.
CAUTION

An image map definition file should never contain both a point and a default region. If point regions are defined and a user does not click a hot region, the server sends the user to the URL associated with the closest point region and the default URL will never be used.

Following each type of region in the image map definition file is the URL that is returned to the user when a click within that area is recorded. Active regions in the definition file are read from the first line down. If two regions overlap in their coordinates, only the one referenced first is activated by the image map program.

CAUTION

URLs in map files should always be absolute or fully qualified URLs-that is, the URL should specify a protocol, server name, and filename (including the directory path to the file)

NOTE

You can use the pound sign (#) to comment on a line in the image map definition file. Any line with a pound sign at the beginning is ignored by the image map program. Comments are useful for adding information such as the date of creation, the physical path to the image map graphic, or specific comments about the server configuration.

Two primary types of map file configurations exist: one for the original CERN-style image maps and one for the NCSA server's implementation of image maps. Both use the same types of hot regions and the same coordinates to define each type. However, the formatting of this information in each map file is different. For this reason, you should check with the system administrator about the particular image map setup of the server you are using.

The CERN Map File Format Lines in a CERN-style map file have the following form:

region_type coordinates URL

The coordinates must be in parentheses, and the x and y coordinates must be separated by a comma. The CERN format also doesn't allow for comments about hot regions. A sample CERN-style hot region definition might look like the following:

poly (133,256) (42,378) (298,172) http://www.your_firm.com/triangle.html

The NCSA Map File Format NCSA developed a slightly different format from CERN's for the map file information. Their format is as follows:

region_type URL coordinates

The coordinates don't have to be in parentheses, but they do have to be separated by commas. The equivalent of the map data line presented previously in NCSA format is as follows:

rect http://www.your_firm.com/triangle.html 133,256 42,378 298,172

Setting up the Image Map

Because of the differences in image map processing programs on different servers, you can use two techniques for setting up image maps.

NCSA and CERN Servers After you create a map file for an image, you must make it an anchor to include it in an HTML file, like this:

<A HREF="/cgi-bin/imagemap/mainpage">
<IMG SRC="images/mainpage.gif" ISMAP></A>

The hypertext reference must contain the URL to the image map script followed by a slash (/) and the name of the map defined in the Imagemap.conf file. In the example above, the name of the map is Mainpage. The actual graphic is then included with the <IMG> tag. The <IMG> tag also includes the ISMAP attribute, indicating that the image placed by the tag is to be a server-side image map.

For this example to work, the Imagemap.conf file must also include a line pointing to a map file for the image map Mainpage. That line might look like the following:

mainpage : /maps/mainpage.map

Entries in the Imagemap.conf file enable the image map program to find the map files you create. You need a similar entry in the Imagemap.conf file for each image map you want the server to process.

NOTE

The CERN server includes a slightly different version of the image map script, called htimage, that eliminates the need for the Imagemap.conf file. Instead, htimage allows you to specify an URL to the map file directly. Using htimage instead of imagemap in the preceding example, you write the following:

<A HREF="/cgi-bin/htimage/maps/mainpage.map">
<IMG SRC="images/mainpage.gif" ISMAP></A>
TIP

You can use CERN's htimage script even if you run the NCSA server.

Netscape and Windows HTTP Servers Linking to the image map script on the server is somewhat easier under Netscape and Windows HTTP servers. For this program, you just use the following line with an NCSA-style map file:

<A HREF="/maps/mainpage.map">
<IMG SRC="images/mainpage.gif" ISMAP></A>

These servers don't require the Imagemap.conf file, so you can "eliminate the middle-man" and point directly to the map file.


Step by step

Step by step instructions in how to create an Image Map

I. NEW IMAGE MAP & NEW HTML FILE.

Create new Image Map and new HTML file at the same time -- all tags are automatically inserted in your NEW HTML document.

1. Open the Map Designer program and select "FILE | NEW".

2. BROWSE to the IMAGE you want to make a image map from, select it.

NOTE: The image will be copied automatically in the same directory your HTML file resides in.

Now the image is loaded into the Map Designer program. Use the ZOOM feature if needed.

3. Select the Rectangle , Circle or Polygon tool – draw the HOT-SPOT in the image by holding down the left mouse button.

Use Bottom panel to set Target URL parameters. Double click on selected area shows pop up menu with area parameters .

4. Click Testing button (or "VIEW | TESTING") to test your new HTML Map in web browser.

5. Save the file ("FILE | SAVE AS...")

Once you click the OK button, several things are happening.
The NEW HTML file is created with all the needed basic tags, including the image map information. The actual Image is automatically copied into the SAME directory the NEW HTML file is located in.

That's it -- The Image Map and the new HTML file has been created. Use you Browser, check it out!

II. INSERT NEW IMAGE MAP INTO EXISTING HTML FILE.

Create new Image Map and insert new image into existing HTML file.

1. Open the Map Designer program and select "FILE | NEW".

2. BROWSE to the IMAGE you want to make a image map from, select it.

NOTE: The image will be copied automatically in the same directory your HTML file resides in.

Now the image is loaded into the Map Designer program. Use the ZOOM feature if needed.

3. Select the Rectangle , Circle or Polygon tool – draw the HOT-SPOT in the image by holding down the left mouse button.

Use Bottom panel to set Target URL parameters. Double click on selected area shows pop up menu with area parameters .

4. Click Testing button (or "VIEW | TESTING") to test your new HTML Map in web browser.

5. Open build-in HTML Editor window ("VIEW | HTML EDITOR"). In editor:

- Open existing HTML file ("Open" button)
- Place the cursor where ever you want the image map to be inserted
- Paste the mapped image ("Insert Mapped Picture" button)
- Test result HTML file ("Testing" button)
- Save the file ("Save as..." button)

That's it -- The Image Map has been created. Use you Browser, check it out!


Menu commands

File
New - create new hypergraphic document
Open MapDesigner file - open html file created by MapDesigner
Open picture - change a picture file in the current document
Save as... - save created hypergraphic document:
Client-side HTML File, *.html - in HTML-format
Server-side map (CERN), *.map - in *.map file (CERN format)
Server side map (NCSA), *.map - in *.map file (NCSA format)

About CERN and NCSA formats see Server-side Image Maps

Edit
Reset - delete all areas
Copy - copy selected area to clipboard
Cut - cut selected area to clipboard
Paste - paste area from clipboard
Delete - delete active area

Drawing
Rectangle - set up the rectangle style of sketching
Polygon - set up the polygon style of sketching
Circle - set up the circle style of sketching
Select/Move - arrow tool (area selection/moving mode)
Modify - allow you to edit the points of a figure to change the shape
Snap to grid

View
Zoom - change zoom on the picture
Show area setting box - show area settings dialog automatically when area is created
Show rulers
Hide bottom panel / Show bottom panel
Hide left panel / Show left panel

HTML-editor - easy to use built-in editor of HTML files
Testing - test created image map with your default web-browser

Settings
Toolbar - change the toolbar mode:
- Small buttons
- Large buttons
Area pattern - change an area pattern:
- None
- Cross
- Diagonal
- DiagonalCross
'Area pattern' means pattern, which fills up areas shown
Active color - color of active area
Non-active color - color of non-active area
Grid size - grid cell size for Snap To Grid option


Menu commands

HTML Editor
The editor has a standard text editor interface.
The button 'Insert Mapped Picture' inserts map section created into a current position of the cursor.


Tips

Some Tips

OnMouseOver & OnMouseOut events

OnMouseOver is the event which occurs when you place mouse pointer on area.
Enter any text string into OnMouseOver text box.
Open build-in HTML editor and you'll see the line.

OnMouseOver="window.status='your text'; return true"

Command
"window.status='your text'
prints the string 'your text' in statusbar of a browser. ('your text' is the string you wrote into OnMouseOver text box of the program)

OnMouseOut occurs when you're moving mouse pointer off area.

You may insert your own command instead of

window.status='your text'; return true

Drawing of polygonal shapes

- Click in the image to set the starting point.
- To draw a straight segment, position the pointer where you want the first straight segment to end, and click.
- Continue clicking to set endpoints for subsequent segments.
- When you double-click figure is completed.


Menu commands

Registration Notes .... (see for details How to register )
Why should I register? ,
- your support helps the author make this program better.
- being unregistered, Map Designer shows Nag Screen
- you're getting full technical support.

Note that your registration will be valid for all future updates of Map Designer. Registration costs only 24,95 US Dollars.

When your order is processed, you receive a registration code and instructions via e-mail, how to enable all the features of your copy of Map Designer. No additional downloads are necessary. You will receive the reply within 2 business days, however most codes are sent within one day.

To register just click here: REGISTER

You can get free registration if:
- you'll translate a help file and messages for this program into your national language (for details, contact us).
- you find and describe 1 repeating bug in this program (except for beta versions of the program);
- you have a really good idea how to improve this program, and we will use it.


How to register

How to register Map Designer Pro

To register just click here: REGISTER

The registration gives you the right to use HTML Map Designer Pro after the 30-day trial period, receive technical support and use features available only for registered users.

HTML Map Designer Pro can be registered using either a credit card or regular mail service at authorized registration site at ShareIt, Inc., or with local representatives (see below).

HTML Map Designer Pro single license pricing: $24,95
But you can pay in euro as well.

If you have questions on site licences and alternative payment
options, write support@imagecure.com

If you would like to register Map Designer Pro, you can do the registration online on the Internet at http://www.shareit.com/programs/141273.htm. Note, this server is very secure. If you do not have access to the Internet, you can register via phone, fax or postal mail. Please print out the following form, and fax or mail it to:

United States

ShareIt! Inc.
P.O. Box 844
Greensburg, PA 15601, USA

Phone: (724) 850 - 8186
Fax: (724) 850 - 8187

*** ALL CHECKS SENT TO THE U.S. OFFICE MUST BE MADE
PAYABLE TO: "ShareIt! Inc." ***

US check and cash orders can be sent to our US office.
US customers may also order by calling 1-800-903-4152 (orders
only please!).

Germany

ShareIt!
element 5 AG
Vogelsanger Str. 78
50823 Cologne
Germany

Phone: +49-221-2407279
Fax: +49-221-2407278
E-Mail: register@shareit.com

View registration form


Menu commands

Technical support
For technical support, please contact Mr. Alexander Kasholkin at support@imagecure.com

The latest version of Map Designer is always available from our web page at http://www.imagecure.com

If you have found out a bug...

Do not hesitate to write us about it. We shall try to fix.


Menu commands

Map Designer : License

The Map Designer is shareware. This means:

- All copyrights to Map Designer are exclusively owned by ForthTech Software.

- Anyone may use this software during a test period of 30 days. Following this test period of 30 days or less, if you wish to continue to use Map Designer, you MUST register.

- Once registered, the user is granted a non-exclusive license to use Map Designer on one computer (i.e. a single CPU), for any legal purpose, at a time. The registered Map Designer software may not be rented or leased, but may be permanently transferred, if the person receiving it agrees to terms of this license. If the software is an update, the transfer must include the update and all previous versions.

- The Map Designer unregistered shareware version may be freely distributed, provided the distribution package is not modified. No person or company may charge a fee for the distribution of Map Designer without written permission from the copyright holder.

- MAP DESIGNER IS DISTRIBUTED "AS IS". NO WARRANTY OF ANY KIND IS EXPRESSED OR IMPLIED. YOU USE AT YOUR OWN RISK. THE AUTHOR WILL NOT BE LIABLE FOR DATA LOSS, DAMAGES, LOSS OF PROFITS OR ANY OTHER KIND OF LOSS WHILE USING OR MISUSING THIS SOFTWARE.

- You may not use, copy, emulate, clone, rent, lease, sell, modify, decompile, disassemble, otherwise reverse engineer, or transfer the licensed program, or any subset of the licensed program, except as provided for in this agreement. Any such unauthorised use shall result in immediate and automatic termination of this license and may result in criminal and/or civil prosecution. All rights not expressly granted here are reserved by Alexander Kasholkin

- Installing and using Map Designer signifies acceptance of these terms and conditions of the license.

- If you do not agree with the terms of this license you must remove Map Designer files from your storage devices and cease to use the product.

Copyright 1998-2000 ForthTech Software


Menu commands

To vendor and distributor
This part provides information for Shareware Distributors, Disk Vendors, BBS Sysops and Computer Clubs who wish to distribute the Map Designer package.

- The Map Designer unregistered version may be freely distributed, provided the distribution package is not modified. No person or company may charge a fee for the distribution of Map Designer without written permission from the copyright holder.


Area Settings
When the arrow tool is selected, you can (a) double-click on an area; (b) right-click to show a pop-up menu. Any of these actions will bring up the Edit Area Info dialog box. The Edit Area Info dialog shows information about the area, such as the URL, ALT, TARGET and OnMouseOver|OnMouseOut text

The TARGET item is used mainly for jumping between FRAMES on a single web page. A web page that has FRAMES appears to be divided into two or more sections. FRAMES, their usage, and how to set them up are outside the scope of LiveImage and this help file.

If you enter a value for TARGET, and the url in question points to a web page that does not use Frames, then the browser will open a new window. This can be quite valuable if you want to do this - you can cause a link to open the new browser window that refers to a whole new site that is outside of your control.


Arrow

The Arrow tool is used to move, edit, and delete areas in addition to allowing you to change their size and shape. To move the area, position the cursor to area. Press and hold the left mouse button and move the mouse to where you want the area to be moved to. Release the mouse button to "drop" the area in its new place.

The Arrow tool can also be used just like the other three tools to reshape the areas. Just grab the area's handle, and press and hold to move.

The Arrow tool also has a right-click menu when you move the cursor over an area. Right-click to bring up a popup menu that lets you edit this area's information, delete it, or rearrange it in the map list.


Circle

The Circle tool is used to create round areas in the map. Drawing method performs a "pull from center"; that is, where you click and hold the left mouse button is the center point of the Circle area. Pull the mouse out to about where you want the circle, and let go. A circular "ghost" is drawn as you do this, showing you where it will be placed when you let up on the mouse button.


Polygon

The Polygon tool is used to create non-uniform areas. You start a new polygon area by moving the mouse to the first point, and clicking the left mouse button once. Move the cursor to the next point - you will see a "ghost" line tracking from the starting point to where the cursor is. Click the left mouse button once to add this point into the polygon and start the next line. You end your polygon creation by either double-clicking the left mouse button where you want the last point to be.


Rectangle

The Rectangle tool is used to create rectangles in the map. You create new rectangles by moving the cursor to where you want one corner to be at, pressing and holding the left mouse button, and dragging the cursor to the opposite corner. Release the mouse button when you are done. A rectangle "ghost" is drawn on the screen in real-time as you go.