Copyright: Help file Copyright © 1995-1996 Todd C. Wilson/Fresh Ground Software
Citation: Help file Copyright © 1995-1996 Todd C. Wilson/Fresh Ground Software


About Map THIS!

The FREEWARE Image Map Editor for the World Wide Web.

Written and copyrighted (C) 1995-1996 by Todd C. Wilson. Please read the legal disclaimer for information on distribution and licensing.  For information on getting technical support for the program only, please read the tech support topic.

What is Map This?

Map This is a program that can be used to create, edit, and convert Clickable Image Maps for the World Wide Web. Map This does this by allowing you to actually draw the areas to be defined on the graphic you wish to use, attach HTML "url" references to each area, and save the image map data off into either NCSA, CERN, or HTML 3.0 format for use on the World Wide Web.

What can Map This do for me? More importantly, why should I use Map This?

Setting up image maps the "traditional" way requires you to load the graphic into a picture viewer or editor that supports showing the cursor position and writing down the positions of each area you wish to define. Then you would normally have to type these into a specially formatted text file.

Map This makes all of this really easy (and yes, fun) by allow you to load the graphic, and draw directly on it with live tools - rectangles, circles, and abstract polygons can all be placed and manipulated. Map This further makes it simple by solving a common problem: converting the map from one format to the other by just opening it and re-saving it.

Map This also offers several additional tools and features to help with creating image maps:

Zoom in up to 8x magnification.

Fly-by AreaTips™

Cut, copy and paste.

Supports moving and reshaping (even point addition/deletion) of Polygons.

Handles images of almost any size.

Supports both GIF and JPG images, including interlaced GIFs.

Doesn't require a TrueColor video board - can operate from 16 colors to 16 million colors.

Handles multiple open files at once.

Keeps a tracking header comment block in the image map file. This allows Map this to keep track of the image that goes with the map.

Supports descriptions per each area, and one for the entire map.

Supports the HTML "target" tag for HTML 3.0 image maps.

Opens existing map files that you might have.

Docking/floating toolbars.

Supports NCSA, CERN, and CSIM/HTML data file formats.

Allows you to save or load as either .MAP, .IMP, .HTM, .HTML, or .SHTML files.

A resizable listing of the areas, alongside with the image.

User-definable Snap-To Grids.

Allows the creation of "Guides" - predefined areas suitable for image "thumbnail" maps.

User definable fill pattern and colors for the areas.

Checks your map as you work on it for missing URL's and obscured or "unclickable" areas.

Supports dragging links from Netscape into the map.

And let's not forget that it's a freeware product!


The Dreaded License Restriction

This program is FREE. There is no charge to use, copy, or distribute this program. You may place this program on ANY file transfer site, of ANY kind. You may give it to your friends. You may delete it. You may use it to wrap fish in.

This program (Map This) is copyrighted © 1995-1996 by Todd C. Wilson / Fresh Ground Software. This program is provided AS-IS. See below for more legal-speak. Or you can read my version of a disclaimer.

If you wish to include this on a CD collection, or put it on a disk that is to be included with a book, please contact me. I almost always say "yes", and would appreciate a free copy of the book/disk for my collection. This is only fair, since you are going to make money and I'm not.

If you would like to bundle Map This with your software (either as-is or with suitable modifications), contact me for terms and references of already completed custom versions.

Exception: FTP sites such as Oakland, Garbo, Cica, etc., who create CD collections (or license others to create CDs of their collections) on an annual or semi-annual basis in order to cover operating costs do not have to ask permission. Permission was granted the instant the program was uploaded (most sites have a paragraph covering this, but why not get it all in there?).

The really ugly part (you can skip it, it's there for the lawyers):

THIS PRODUCT (MAP THIS) IS PROVIDED AS IS WITHOUT ANY WARRANTY OF ANY KIND. TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, TODD C. WILSON, FRESH GROUND SOFTWARE, AND MOLLY PENGUIN SOFTWARE FURTHER DISCLAIMS ALL WARRANTIES, INCLUDING WITHOUT LIMITATION ANY IMPLIED OR STATED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. THE ENTIRE RISK ARISING OUT OF THE USE OR PERFORMANCE OF THIS PRODUCT AND DOCUMENTATION REMAINS WITH RECIPIENT. TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, IN NO EVENT SHALL TODD C. WILSON, FRESH GROUND SOFTWARE, AND/OR MOLLY PENGUIN SOFTWARE OR THEIR SUPPLIERS BE LIABLE FOR ANY CONSEQUENTIAL, INCIDENTAL, DIRECT, INDIRECT, SPECIAL, PUNITIVE, RECURSIVE, OR OTHER DAMAGES WHATSOEVER (INCLUDING, WITHOUT LIMITATION, DAMAGES FOR LOSS OF BUSINESS PROFITS, BUSINESS INTERRUPTION, LOSS OF BUSINESS INFORMATION, PERSONAL INJURY, DISRUPTION OF FAMILY LIFE, OR OTHER PECUNIARY LOSS) ARISING OUT OF THIS AGREEMENT OR THE USE OF OR INABILITY TO USE THE PRODUCT, EVEN IF TODD C. WILSON, FRESH GROUND SOFTWARE, AND/OR MOLLY PENGUIN SOFTWARE HAVE BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. BECAUSE SOME STATES/JURISDICTIONS DO NOT ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR CONSEQUENTIAL OR INCIDENTAL DAMAGES, THE ABOVE LIMITATION MAY NOT APPLY TO THE RECIPIENT.

LET IT BE KNOW THAT THE USER OF THIS PROGRAM HAS PAID TODD C. WILSON, FRESH GROUND SOFTWARE, AND MOLLY PENGUIN SOFTWARE THE SUM TOTAL OF $0.00 FOR THE UNLIMITED AND UNRESTRICTED USE OF THIS PROGRAM. ANY DAMAGES AWARDED SHALL NOT BE IN EXCESS OF SAID AMOUNT.


My Personal Disclaimer

If the legal disclaimer leaves a bad taste in your mouth, you might prefer this one:

(can you find the new ones from last time? Read carefully, and don't drink anything at the same time)

DISCLAIMER (I MEAN IT): This program and documentation reflects the thoughts, opinions, ideas, and body odor of myself; it does not reflect the thoughts, opinions, ideas, and/or body odor of my company, my friends, my wife, my daughter, my fish, my roses, my dog, or my trash. All rights reserved, all lefts reserved. This software is subject to change without notice. Bits are slightly enlarged to show detail. Any resemblance to actual software, running or hung, is unintentional and purely coincidental. Employees and their families are not eligible. Beware of dog. Forget the dog, beware of owner. As seen on TV. One size fits all. Hand wash only, tumble dry on low heat. Do not fold, spindle, or mutilate. No substitutions allowed. For a limited time only. Type hard, you are making five copies. This software is a void pointer to null where prohibited, protected, declared private, taxed, or otherwise restricted. Software is provided "as is" without any warranties expressed or implied. User assumes all liabilities. Not liable for damages due to use or misuse or inability to understand. An equal opportunity electron employer. No shirt, no shoes, no software. Quantities are limited while supplies last. Do not write below this line. Falling rock. Falling bridge. London bridge is falling down, falling down, help, I've fallen and I can't get up. Quality may vary. Since software is hand-crafted, there will be slight differences in each object. If defects are discovered, do not attempt to fix them yourself, but return to an authorized service center. No Parking. No Standing. No Solicitors. No Spitting. No Kidding. Posted no Bills. No alcohol, dogs, or horses. No anchovies please. Parental Advisory - explicit source code. No one under 17 admitted. Keep away from sunlight, pets, and small children. Limit one per family. No money down. No purchase necessary. Cache and carry. You do not need to be present to win. Some assembly and C++ required. Batteries not included. Action figures sold separately. Apply only to affected area. May be too intense for some viewers. Do not stamp. Use other side for additional listings. For recreational use only. Do not disturb. All models are over 18 years of age. Available in fine shoe stores everywhere. Take a number please. Preservatives added to improve freshness. Safety goggles must be worn at all times. Hard hat area. Sealed for your protection. The buss stops here. Call before you dig. Add toner. Sanitized for your protection. Place stamp here. How about a nice game of chess? EXTERN use only. If a rash, redness, irritation, or swelling develops, discontinue use and consult your magic eight ball. Use only with proper ventilation. Avoid extreme temperatures. Store in a cool dry place. Refrigerate after opening. Keep away from open flames and avoid inhaling fumes. Avoid contact with eyes. Do not puncture, incinerate, or store above 120 degrees Fahrenheit. If this software begins to smoke, run, do not walk, towards the nearest exit. Do not place near any magnetic source. Smoking this software may be hazardous to your health. Stop playing with that atomic pile. You are not in Kansas any more. I/O, I/O, its off to work I go. Slippery when wet. For office use only. Not affiliated with the CIA. Drop in any mailbox. Edited for television. A proud sponsor of the local chapter of the old hackers home. Code used in this software was made from 100% recycled electrons. Prosecutors will be violated. No animals were used to test the runtime performance of this software. No extra salt, MSG, artificial color or flavoring added. If ingested, do not induce vomiting. If symptoms persist, delete yourself immediately. If you suspect an overloaded operator, destroy immediately. Constantly volatile when exposed to static pointers. The white zone is for passenger loading and unloading only. Do you like gladiator movies? Content's under pressure. Restaurant package, not for resale. First pull up, then pull down. Call before digging. Driver does not carry cash.  Auto pilot is engaged during flight. Possible penalties for early withdrawal. Free software offer valid only at participating FTP sites. Slightly higher outside of the continental US. Allow four to six seconds for delivery. What is best in life? To crush your enemies, see them driven before you, and to hear the lamentation of their women. Motor vehicles only. Actually, I am a mouse in the middle of an incredibly complicated plot to take over the world. This disclaimer does not cover hurricane, lightning, tornado, volcanic eruption, earthquake, flood, and other Acts of Bob, misuse, neglect, repair, attempted modification, bugs in the code, damage from improper installation, incorrect line voltage, cosmic rays, missing or altered serial numbers, attempting to actually run the software, sonic boom vibrations, electromagnetic radiation from nuclear blasts, and incidents related to airplane crash, ship sinking, motor vehicle accidents, leaky roof, alien attack, broken glass, falling rocks, mud slides, forest fire, flying squirrels, verbal assaults, or house arrest. Other restrictions may apply. Your mileage may vary. This software is copynighted by Todd C++ Wilson.


Technical Support

Technical support and the latest version of Map This can be found at:

http://www.ecaetc.ohio-state.edu/tc/mt

Please, do not email me with questions or pleas for help with getting your web page to work. There are several good books and reference sites available for HTML and designing web pages - use them!


Todd C. Wilson

Map This author, Strange Matter Archiver, Coffee Drinker.

email:	tc@www.ecaetc.ohio-state.edu

home page:	http://www.ecaetc.ohio-state.edu/tc


Why free?

The main reason is that too many programmers believe that they can make a living writing crappy shareware and charge $25-$75 for it. Another good reason is that I believe that making image maps is cool, but how many times will you actually use this program? Enough to warrant paying $25+ for it? I have also gotten a LOT of enjoyment out Internet over the last fifteen years, and had some slack time on my hands. So I came up with something that people could possibly use.

I could go on and on about the utter abuse of shareware, on both sides of the fence (authors vs. users), but I'd probably bore you to death. If you really must hear me vent my spleen, feel free to email me!

Be sure to read the license restrictions and copyright notice.


Back before there was World Wide Web, or Windows. When it was UseNet and ARPANet. When we all hacked Unix and VMS and loved it, and never dreamed of stuff like networked Doom. Strong, heady, anything-is-possible days. Ah yes...


Limitations of Map This

Map This is a pretty decent program for what you paid for it. But let's face it, it was written by one person with input from some others, and reflects what I, personally, think is "cool" and "useful". If you have a suggestion, please, feel free to contact me and tell me!

The following is a list of know problems, issues, or just plain "wait for the next version" items:

Map This is a Windows 32-bit program. I do not feel this is a true limit because of the proliferation of Windows NT, Win95, and Win32s.

Map This only uses a mouse as input. It's a semi-CAD program, after all.

Map This supports up to 1024 areas per map. It will generate an error if you try to add more areas or load a map file that has more than this. This is not a true problem, since most servers will die if you have this many anyway.

Each polygon area is allowed up to 64 points. Some Web Servers put a lower limit - I know of one that only allows up to 16 points.

The scrolling of the image when you are zoomed-in is slow on some NT systems. This is usually a problem with the video driver in use.

NCSA image maps allows "points" (closest-point-to-click-wins scheme) to be used for their maps. But since nobody has asked for, and since CERN and CSIM don't support it, there doesn't seem to be a reason to put it in.

It would be nice for Map This to use the Win95/NT4 shell more than it does.

Map This currently only supports Netscape as a drag'n'drop link source. It treats all the others like a text source, so you will get the words, not the link.

Map This doesn't put the map file into the server - you have to do it yourself.


Release Notes
Release notes for version 1.31.0

Version 1.31 bugs fixed:

Certain GIF images cannot be opened

Some legitimate GIF files would fail the rigid format checking that Map This performs. These images could be opened and manipulated by other graphic programs.

Changes made to help Win32s issues

Minor adjustments to the program were made to help some people who were having problems with Win32s. If you still have problems with Win32s, you probably need to re-install Win32s.

Windows 95 GPF in the file MACXW4.DRV

This is NOT A PROBLEM WITH MAP THIS. This is a problem with the MACH64 video driver "FlexDesk" from ATI. You just need to download and install the current drivers from ATI at http://www.atitech.ca or http://www.atitech.com

The following items were changed in version 1.30:

Corrupted HTML files

Under Windows 95 only, some systems would continual add garbage to the end of the HTML file that Map This was saving into. This is a design flaw in Windows 95, pure and simple - it doesn't happen under NT nor under Win32s. Map This now works around this.

Area Listing

This is now a real dockable item, just like a toolbar. You can pull it off and resize it. And the arrow, delete, and enter keys work in it, too!

Area Tips

Just like your normal tooltip, but shows up as you fly over the areas. Helps with designing the map. You can turn this on or off, of course. See Preferences.

Zoom-in and Scroll bug fixes

Usually, you'd have a problem putting areas in certain locations when you are zoomed in and scrolling around. This has been fixed.

More HTML3 support

CSIM's now have an optional TARGET tag for each area, to support mixing image maps with frames.

Change the Image

You can now change the image on a map (File->Change Image). Just select the new graphic and you're all set. But be warned - you can get very messy results!

Zoom-To popup menu

Just click in the status bar over the zoom level box and pick your zoom level. You can also get to this from the View menu.

Hidden areas and Missing URLs

The program now keeps better track of these in the status bar for when you have more than one map open. They are also updated better in the Area List box.

Spinning

The Guides and Grids dialog boxes now have up/down spin buttons to make your life a little easier.

Grids

The Snap-To Grids has been fixed.

Making New Circles

When you are creating a new circle, Map This now uses a "pull from center" circle method. This was done to remove a lot of confusion and user irritation. Once the circle is created, you can reshape it with the normal handles.

Stay on Top

I added a push-pin icon to the main toolbar to simplify dragging links from Netscape over to Map This. Map This does not currently support Internet Explorer in this fashion. The next version will.

Bigger is Better

In the Preferences, you can now turn on Double-Sized Grab Handles to make things a little easier. You should also see the Preferences topic on the subject of Color.

Better Colors

The handles are now colored using a mix of the two colors for each type (unselected, selected, flyby) instead of just the second color. The lines now always color with the mix, instead of sometimes being mixed and sometimes not. See Preferences.

Fancy Border

I added a nice border and background fill to set off the image from the rest of the program. Just makes life easier for you, since you no longer try to accidentally run out of the image.

Size Limits

Map This now checks the map area positions when loading the map or when changing the image, and warns you that it will have to clip things to make them fix.

Email Support

I removed this due to too many people abusing it.

The following items were changed in version 1.20:

Heap Corrupted Error

This error would show up if certain GIF images were loaded. The GIF decoder would overwrite it's memory area by one byte. Okay, so what - why the big error? Well, it's a lot better to have a warning and a safe exit than no warning and a crash. This has been fixed.

Area Fill

Another feature added is the option to have Map This fill in the areas with a pattern and color. This is nice when you have a complicated map and need to see things. See Preferences.

Handles

You can now turn the handles on or off. Added because people were doing very complicated maps and having trouble. See Preferences.

Client-Side Image Maps

Map This now supports the HTML 3.0's Client Side Image Map specification. See Image Map Formats.

Save As dialog box

This file dialog is now modified by Map This to add some more controls to let you change the map information at the last moment. See Saving an Image Map.

Cut, Copy, Paste

You can now use the normal Edit menu options. Even between maps.

Test the Map

A lot of people wanted this. Okay, here it is. The best way to test is still to put the files on your server. See Testing the Map.

Grids

If you entered a zero value for either the width or height, then Map This would "lock up" - forever. You would have to then manually remove some registry keys (YUCK!). Now it checks and refuses to continue. See Snap-To Grids.

Email Support

The counter seemed to upset some people. So I changed it.

NOTE: Email support has been removed from version 1.30 and all future versions.

The following items were changed in version 1.10:

Memory:

This was the biggest improvement of the program. Under Win32s, you could easily run out of resources with a decent sized map (if you run NT like any sane person does, you'd never have this problem). Map This 1.10 now uses more "temporary" GDI objects, and does very aggressive memory management (yes, it does take a little more code, and yes, it does slow the program down a little - very little) If you watch the resource percentage value, you may suddenly see it dip from about 70% to 54% - and then jump back up.

Polygons:

Another area of work is in dealing with Polygons. Map This 1.10 allows you to add and delete points from a polygon using the right mouse button. There was also one bug fix in that if you saved a map in a zoomed-out state, the polygon values were all screwed up.

Grids:

Snap-To Grids are supported by the program. You can control how big they are, where they start, and how they look like. This affects the mouse movement when you make a new area or drag an old one. See Snap-To Grids.

Guides:

Another feature of Map This 1.10 is that it can create "Guides" or "Template" of regular rectangular areas. I put this in because I was creating a bunch of thumbnail maps and was getting very tired of doing it by hand. See Creating Guides.

Preferences:

You can now customize the colors used for the lines "styles", and select the default image map type (NCSA, CERN, or CSIM). See Preferences.

New Areas:

By default, Map This does not prompt you for new area information. Some people like it this way. Some don't. You can turn this on or off. See Preferences.

Context/Right-Click:

Right-clicking in the map between the areas will bring up the control menu of the common things - select tool, zoom in/out, grids, etc. Right-clicking on an area will let you delete the area, move it up or down in the map list, or edit the area's information. Right-clicking on a Polygon point will do the same, but also allow you to delete the point. Right-clicking on a Polygon line gives you the option to insert a new point. See Right Click Menu.

Background Area Checking:

Map This will also check your areas out for you if you don't move the mouse for a tiny amount of time (this is called "idle time checking" - Word 6.0 does this with its "background repaginate"). If an area is missing a URL, you will get a warning icon in the status bar. If you have an area that is obscured, you will get an unhappy face in the status bar.

Status Bar:

The status bar is now fully enabled instead of the plain vanilla one in 1.00.5 - it now shows the zoom level, the mouse position in the map, and the size of the movement. It also shows the warning icon (missing URL) and the unhappy icon (area obscured). Moving the mouse onto these icons will put up a tool-tip text box telling you what is wrong.

Shift key:

In order to "grab" those obscured areas, you either have to shuffle the list or move the area covering the other one out of the way. But if you hold the shift key down, Map This will scan the area list in reverse, allowing you to grab that bad area.

CERN map files:

The CERN format does not support comments in the file. Map This 1.10 works around this by placing specially formatted "rectangle" areas in the list.


What is an Image Map?

An image map is a graphic that has certain areas on it defined to "do something" when the user clicks on each of the area. These areas can do whatever normal HTML links do - email, ftp, gopher, etc. Two very popular uses for image maps are navigation bars and thumbnail sheets. Another common usage is to take a graphic of a country (say, the US or UK) and define areas on the map to take you some where. For example, I could use a graphic of the United States and define an area that covers the state of Ohio to take you the web page of the Ohio State Department of Water (or whatever).

If you think you’ve never seen an image map before, you’re wrong! Most help files for Windows’ applications have some sort of graphic that is a screen capture of a dialog, and have information about the buttons. In fact, the help file you are reading right now has a lot of them! The same concept carries over to image maps on the Web. However, you will not see a change in the cursor when you move over various areas of a Web-based image map (unless a future browser supports such a thing).


Creating a new image map

Each image map must have an image to be based upon. It would be pretty strange to have a map that consists of nothing but a black screen!

Map This supports both GIF and JPG formats for images, just like all major browsers. Map This does not currently support Progressive JPG files nor PNG format images.

When Map This saves your image map file, it places a special tag into the file that records the filename of the image, and where it was last stored at. This gives Map This the ability to find the image when you re-open the map later. This information in no way affects the actual online operation of the image map file!

Once the image is loaded and decompressed (this is very quick, even with JPG images), the document window opens up, showing the image and the toolbar. Initially, the arrow tool is selected. Click any of the other drawing tools, or use the Guides feature to make some quick areas up.


Opening an existing image map

Map This will allow you to open maps that you have created, and previously existing maps that were designed for the CERN or NCSA servers, or for HTML 3.0 browsers in CSIM format. The Map This distribution archive contains CERN, NCSA, and CSIM example maps and images (Fish for NCSA, Dragons for CERN, Lake for CSIM), and some example HTML files.

If you open a map that Map This did not create, then you will get a message box asking you to locate the image that goes along with the map. If Map This did save the map file that you are opening, there are special tags buried in the map file to help Map This locate the image file.

Map This can open any HTML file and look into it for a Client Side Image Map. If more than one map is stored within the HTML file, Map This will bring up a dialog box asking you which one to use.

As a standard convention, NCSA and CERN image maps are stored as filenames ending in ".map". An older, less-supported convention for NCSA maps is ".imp".

CSIMs are always stored as either ".htm", ".html", ".shtm", or ".shtml" - Map This treats them all the same.


Creating Areas

When you select the one of the three drawing tools (rectangle, circle, or polygon), you can then use the mouse to start creating new areas. The method of creating and editing new areas varies slightly from tool to tool, but they all behave "naturally", as you would expect them to.

The status bar in the lower-left hand side of the main window shows the brief info on how to use the tool as you move the mouse around.

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.

The Circle or Oval tool is used to create round areas in the map. The behavior of the Circle tool depends on the type of map you are editing, and whether or not you have the "Keep NCSA Circles True" set in the preferences. Both methods perform 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.

The Polygon tool is used to create non-uniform areas. This can be used to react to something that is shaped like a boat for example. 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, or bring the cursor very close to the starting point and clicking once.

All three tools can be used to reshape their areas by moving the cursor over one of the "handles" (the gray or black squares on the outline of the area) and pressing and holding the left mouse button. Moving the mouse will then move that handle in the appropriate way and reshape the area. Release the mouse button when finished.

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 where it changes into a 4-way arrow. 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. This area's outline changes color to indicate that this area is being looked at - this is called a "flyby". 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.

The Polygon and Arrow tool also allow you to right-click when on a polygon line or point to add new points or delete old points from that polygon.

Stopping Creation (important info)

When you are creating a new area, resizing or reshaping an old area, or moving an area, you can cancel your movement by either clicking the right mouse button or pressing the Escape (ESC) key on the keyboard. If you are holding the left mouse button down, you may have to keep holding it down and click the right mouse button at the same time. Some mice do not support this, and for some people (me, for example), this is uncomfortable or physically impossible. In this case, press the Escape key on the keyboard to cancel the change or creation.

Also, Map This enforces certain minimum limits on new areas. If you try to create an area that is very small (around 4 pixels tall or wide), it will silently remove it. It does this to keep you from accidentally creating lots of little areas that you can't seem to manipulate.


Editing Areas
Editting and Deleting Areas

Once you create an area, you may have to go back and change something about it. Maybe you need to move it over a little bit. Or the URL that it uses changes. Or you want to delete it all together.

The Arrow tool is what you will use the most to change an area. The Arrow tool is the only tool that can move an entire area around on the screen; the other tools can only change the size, not the position.

To move an area, place the cursor over the area (the cursor will change to your "drag" cursor - usually a 4-way arrow graphic), and then just click and hold the left mouse button, and drag the area to the new location. Release the mouse button when done. If you need to abort the move, either click the right mouse button (while keeping the left mouse button down), or press the Escape key.

To resize a rectangle or a circle, position the cursor over one of the grab handles - the cursor will change shape to a double-arrow image, indicating the directions that you can move this handle. Just click and hold the left mouse button, and move the side to where you want it. Release the left mouse button to end the resize.

To reshape a polygon, move the cursor over top of a grab handle. The cursor will change to a "bullseye" or "gunscope" graphic. Click and hold the left mouse button, and move the handle to the new location. Release the left mouse button when done.

To add a point to a polygon, place the cursor near the spot on the line of the polygon where you want the new point to be. Click the right mouse button, and if you're close enough to the line, the pop-up menu will show an item called "Insert Point". Select this to do so.

To remove a point from a polygon, place the cursor over top of a grab handle, and right-click for the pop-up menu. Select the menu item titled "Delete Point" to delete it. Note that if you try to delete a point from a 3-point polygon, Map This will ask you if you really want to do this.

If you want to edit the area's url, comment, or target data, you can do this in several different ways.

Way #1: use the arrow tool and double-click on the area to bring up the Area Info dialog box.

Way #2: use the arrow tool and select the area with a single click, and then click on the Area Info toolbar icon to bring up the Area Info dialog box.

Way #3: use the arrow tool and right-click on the area to show the pop-up menu, and select Edit Area Info.

Way #3: with the Area List showing, select the area either with a single click or in the list box, and then click on the Area Info icon in the area list.

Way #4: double-click on the area in the Area List box.

Way #5: if you just want to edit the url, select the area and then in the Area List box, click in the url field and type what you want.

Deleting an area is trivial - select the area, and then either right-click for the menu and select Delete Area, or click the Delete Area toolbar icon.

When the image map is presented to the user, the location the user clicks in is searched in the list of areas, from first to last (this is called a "top-down" search). If you want to re-arrange the search order, you can do this with Map This's rich feature set in several different ways.

The Area List Box is the easiest way: just select the area and the use the up and down buttons to move it.

Another way of doing it is right-clicking on the area and select Move Up or Move Down to re-arrange.


Saving your work

Once you are done creating and editing your image map, you need to save it. Just click on the File Save icon in the toolbar, or pull down the File menu and select Save or Save As. Map This will prompt you for the title and default url if necessary, and may bring up the File Save As… dialog box if it needs to.

If you are saving a CSIM map, then I recommend that save the map "into" the HTML file that you will use it from. This is because current browsers do not fully support the HTML 3.0 specification for "external" Client Side Image Maps.

For more information about saving, see the File Save topic.


Testing your map
Testing the map

Map This has a built-in test feature that lets you preview what the map may look like to the user. By itself, this is not very useful, since all it does it show the graphic and displays the url of each area as you move over them. However, it does give you a feel for how things will behave for the user.

To fully test your image map, you will need to insert the correct data into your html file and then view that html file using your browser. You will probably also need to upload your files to your web server, and then set the server up correctly to complete your testing. See Modifying your HTML file for more information.


Interesting things about maps
Interesting things about image maps you should know.

1. The order matters.

This is important - the map is searched "top down" for an area that the mouse's position falls in. The first area will get checked before the second, etc. The Area List box shows this exactly as the areas occur in the map. You can re-arrange them by using the up and down controls, and you can test it by using the Test Image Map tool.

2. Areas can overlap.

If you think about #1, then this should start to worry you. If areas overlap, then the second area (the one "underneath") will not get checked in the spot where the areas cross.

3. Areas can be obscured.

Since areas can overlap, and the search order matters, you can quite easily have an area that will never be accessible by the user - the areas higher up the list always get the click. Map This checks for this and displays the unhappy face in the status bar and the Area List box when it happens.

4. NCSA and CERN maps require full URLs.

This means that the URLs in NCSA and CERN maps must have the fully qualified command - for example, http://www.big.com/joe/bob.htm will work, and /joe/bob.htm will not.

5. CSIM maps can use partial URLs.

On the other hand, CSIMs can use the /joe/bob.htm just fine.

Also see More About CSIMs.


Special Features

Map This is a feature-rich product. In fact, Map This packs more tools and goodies into a freeware program than the closest shareware competitor, and more than any commercial program. Talk about a major deal!

Here are the Special Features of Map This that you may or may not find useful. For each item, just click on the link to go to the documentation for that.

Zoom: Map This allows you to zoom in up to 8 levels of magnification.

Snap-To Grids: Sometimes you need a little help in getting things lined up. By turning on the Grid, you force each position to line up on a sizing grid that you have full control over.

Guides: Map This has the ability to let you generate pre-created areas, which are normally used for "thumbnail" image maps.

AreaTips™: Since it is very easy to loose track of what area is what, Map This has a special feature called AreaTips™ that lets you see the url as you fly by the area.

Colors: Map This color-codes each area, showing different colors for unselected, selected, and flyby. This helps you sort out what shape you are working on.

Background Checking: Map This continually checks you areas for missing urls and obscured areas, alerting you by special icons in the status bar.


Keyboard controls

Sometimes it's easier and faster to work with the areas with the keyboard. This is especially true when you are putting in a lot of URLs all at once. Map This has some keyboard control that allows you to edit things a little easier and quicker.

Left arrow key:

Takes you to the previous area in the list. If you are at the first area, takes to you to the last one.

Right arrow key or Tab key:

Takes you to the next area in the list. If you are at the last area, brings you back to the first one.

Return key or Spacebar:

Brings up the Edit Area Information dialog box. Same as double-clicking the area.

Delete key or Backspace key:

Deletes the area. You will not be prompted.


Modifying your HTML file
Modifing your HTML file

The critical piece to getting image maps to work is setting up the HTML file correctly. 99% of all failures with image maps can be traced to just not putting in the correct tags.

The key tag to image maps is the <IMG SRC> tag. In order to use image maps, you will need to modify this tag in one of two ways, and may also need to "surround" the tag with another one.

What needs to be modified depends on the type of image map you created. If you created a NCSA or CERN image map, then you are using a Server-Side Image Map. Image maps of this kind requires that the web server process the mouse click. In order to do this, the web server must run a special program called "imagemap" to process or "parse" the map file you created and match up the mouse click position with the areas. Some servers have this "imagemap" program built into them; others require it to be an "external" program. See Server-Side and Client Side for more information.

To use Server-Side Image Maps, you need to change your <IMG SRC> tag from something like this:

<IMG SRC="graphic.gif">

To this:

<A HREF="yourmap.map"><IMG SRC="graphic.gif" ISMAP></A>

The parts in bold are the parts you need to add, of course.

The ISMAP extension to the IMG SRC tag tells the browser that this image is to be considered a mapped graphic, and that mouse clicks over it should be appended to the <A HREF> surrounding the <IMG SRC> tag. This is why you need the <A HREF> tag - you need some command or link to send to the web server.

The <A HREF> item contains, at least, the filename of the image map file you created. With most newer web servers, you can use just the map filename. However, some servers require you to put special commands in this item to get it to work. You must contact your web server admin to find out what you need. Do not email me asking for help with this: I cannot, since I'm not using your web server.

Client-Side Image Map (CSIM) files are much easier to work with than Server-Side image maps. This is because all the control is with you, not the web server. To use CSIM maps, you must first save the file as a CSIM and save it into your existing html file. Map This will place the image map data at the end of the file, out of the way.

Modifying the <IMG SRC> tag for CSIM requires you to change the <IMG SRC> from something like this:

<IMG SRC="graphic.gif">

To something like this:

<IMG SRC="graphic.gif" USEMAP="#maptitle">

The new USEMAP extension tells the browser that is should use the map data referred to as maptitle as the map. This maptitle is the Title of the map that you gave it when you saved it. It is not the filename. See the Map Info dialog box and Client Side Image Maps for more information.


Testing your HTML file
Testing the HTML file

Once you have the image map saved, and the html file set up, it's time to try it out for real. Run your web browser, and have it load your html file, and try clicking on one of the areas of the image map. If it works, great! You're all done. If not, here's the checklist of what happens and what to do:

Q: I click on the image map, but nothing happens.

A: If you are using a Server-Side image map (NCSA, CERN), make sure you have the <IMG SRC> tag surrounded by the <A HREF> tag. If you have a CSIM map, make sure the location in question actually has an area defined.

Q: I click on the image map, and I get this crazy text file with "#$MT Don't edit this…" displayed.

A: This shows up when you are using Server-Side (NCSA, CERN) image maps and under one of two conditions. One, you are trying to test a Server-Side map locally from your hard drive. This will not work. You must first upload the map, graphic, and html file to the server and try it from there. On the other hand, if you have already uploaded all the parts and are trying it from the server and get the map file thrown at you, you will probably have to modify your <A HREF> tag with a "cgi-bin" program. Contact you web admin for help with this. Do not email me for help: I do not know what your server needs!!

Q:  I click on the image map, and I get a Server Error message.

A: This means that you have the image map in CERN format and the server wants it in NCSA, or vice-versa. Just re-load the image map, go to Map Info, change the type, re-save and re-upload and it should work.

Any problems or questions not listed above will require the assistance of your web server admin. Please, contact him or her first before attempting to contact me!


Server Side and Client Side image maps

There are two types of image maps that you can use: Server Side, where the map file is stored in a special text file and the actual web server does the processing, and Client Side, where the data is stored within the html file and the user's browser does the processing.

There are some good reasons why one is better than the other. Personally, I prefer Client Side image maps, since they are easier to maintain. However, you can support both if you wish to take the time.

The traditional way: Server Side image maps and HTML 2.0

Some of your users will not have the latest and greatest version of whatever browser for their system for some time. So you might consider keeping support for these browsers by using the normal method of accessing image maps under HTML 2.0. Or you could just put a link to whatever browser you prefer and let them download it.

Using image maps under HTML 2.0 requires you to format the line in your HTML document like this:

<A HREF="themap.map"><IMG SRC="themap.gif" ISMAP></A>

What this means is that the browser is being told (via the ISMAP) that this image IS a MAP, so that when the user clicks the mouse in it, it sends back the given HREF value with the mouse position appended after it. For example, if the user clicks at position 50,10, the browser sends to the server something that looks like this:

http://www.foobar.com/directory/themap.map?50,10

(Where "www.foorbar.com" is the name of the server, and "directory" is where the html document is stored at)

If the server you are using is one of the newer, more advanced ones, it has all the stuff built into it to understand and process image map requests. Netscape's Server is one of these, and most current commercial NT- and Windows 95-based servers are also like this. However, if you are among the many that are using older software (say, for example, your school's UNIX system), you will discover that the above example will do nothing more than display your image map file to you! Your server needs to be told to run a special program to process the map. This is usually called "imagemap" or "htimage". Contact your system admin to find out exactly what you need - and if you are allowed to use it! Do not email me asking for help - I don't know what your server is using!

Another problem with using server processed image maps is that you cannot "browse" them locally. This means that even if you have the html file, the image, and the map data on your local hard drive, you will not be able to click on an area and have it work. All that will happen is that you will see the text of the map show up in the browser's window! In order to test the map, you have to put it and all the needed data on the server - and run it live. There is just no other way to do it.

The following example is a general idea of what you may need:

<A HREF="/cgi-bin/imagemap/folder/themap.map"><IMG SRC="themap.gif" ISMAP></A>

(Where "folder" is the directory where the map is stored)

Wow! A real mess, right? Let's break this down a little bit to make it a bit more understandable. By the way, this line is what you would use under NCSA-based servers; CERN is very similar, but just different enough to make life interesting.

The "/cgi-bin" refers to a special directory that holds special programs that the system administrator has determined are "safe" for use from within HTML documents. The "imagemap" is the program that will be run. The rest of the line "/folder/themap.map" is the parameter that is fed to the "imagemap" program in addition to the mouse's position  - sort of like DIR *.ZIP from the MS-DOS command line.

There is no guarantee that this example will work for you. Above all, contact your system administrator for what you need to do to get image maps to work.

The new and improved way: Client Side Image Maps and HTML 3.0

With the creation of the new HTML 3.0 specification, one of the more useful things is that the image map data can now be processed by the browser. This has several advantages - first, the data is usually stored within the html document, making management simpler; second, since the data is in the document, and in a single, consistent format, it makes moving between servers (or from local browser to live-on-the-web) easy; and third, the browser does all the processing, reducing the server load. The trade off is that some less-used browsers do not support HTML 3.0 yet. At the time of this writing, all major web browsers support HTML 3.0 and Client Side image maps, so you should be confidant that you'll have no problem with them.

Compared to server-based image maps, Client Side Image Maps (which have I shortened down to just CSIM) are much easier to set up and maintain. Since all the information is controlled by the HTML file, you can stop worrying about what software your server is running, and if your account can use image maps or not, and start worrying about whether or not your map looks good, and if you need more storage for those images or not.

Using CSIM’s is almost the same as using HTML 2.0 image maps, but a lot shorter:

<IMG SRC="mymap.gif" USEMAP="#maptag">

Yes, that's right, you don't need the HREF "wrapper" around the image tag. However, you probably will want to use it, since it will allow you to define a "default" action to occur should the user's browser not support CSIMs, or if you have a hole in the image map.

The USEMAP refers to the name (in this case, maptag) of the map that is within the HTML file. This is the name you gave the map when you saved it as a CSIM file (probably into the same file you are now editing).

Note: The HTML 3.0 specification on image maps says that you can store and image map into a separate file and "call" it from another html file. This is true, but this doesn't seem to be current supported by most (if any) browsers.

Best of Both Worlds: Server-Side and Client-Side maps

Resistance is futile - the new browsers are warping forward, and HTML 3.0 will overrun your federation. But if your server account allows server-side maps, why not use both? Thankfully, the HTML 3.0 specification on CSIMs provide for a way:

<A HREF="/cgi-bin/imagemap/folder/themap.map">

<IMG SRC="themap.gif" ISMAP USEMAP="#themaptag"></A>

What this monster does is tell the browser that it can be used as both types of image maps. The USEMAP tag has a higher precedence than the ISMAP tag, so if the browser supports CSIMs, it will use them. If the browser doesn't support CSIMs, it will ignore the USEMAP tag (just like Mosaic ignores Netscape's <BLINK> tag), but will see the ISMAP tag, and use that. Easy as falling off a log. And in a few years, or when you move your account, you can delete the part about the ISMAP and pretend you never had to deal with it.

The problem with using both formats is... using both formats! You will have to save your map in two different formats, in two different locations. The CSIM can be saved in the HTML file where it is used, but the NCSA or CERN version will have to be saved as an external file (in this example, "themap.map"). As you can see, updating the maps can become a problem, unless you keep careful track of what is what and which one is supposed to be the "master" map, and the other the "copy".


CGI stands for Common Gateway Interface. It basically refers to a standardized command protocol between the Web Server and a server-controlled program. These programs can do things from validating access, to keeping usage counts, and of course, processing image maps.


NCSA:

The National Center for Supercomputing Applications (NCSA), located at the University of Illinois at Urbana-Champaign, is a high-performance computing and communications facility and research center designed to serve the U.S. computational science and engineering community.


CERN:

European Laboratory for Particle Physics, located near Geneva in Switzerland and France. CERN is the birthplace of the World-Wide Web.


CSIM:

Contraction of the phrase Client Side Image Maps. CSIMs are only usable under browsers that support HTML 3.0. CSIMs do not require any sort of special program on the server.


More about Client Side Image Maps

CSIMs are just html files - in fact, they are inside of html files. It's best to think of a CSIM just like an "anchor" definition in html. For example:

<A NAME="download">

Places a "bookmark" in the file that you can then refer to from either within the document, or outside of the document. Assume that I have a file called "words.html". Inside of this document, I have an anchor that is setup as <A NAME="jumphere">

To go to this anchor from within words.html, I just use <A HREF="#jumphere">

To go to this anchor from outside of words.html, I use <A HREF="words.html#jumphere">

The same concept carries over to CSIMs: you can refer to them within the same document

<IMG SRC="something.gif" USEMAP="#themap'>

or from another document:

<IMG SRC="whatever.gif" USEMAP="something.html#themap">

The browser is responsible for requesting the correct html file from the server and processing it's map.

NOTE: currently, no browser that I am aware of supports EXTENRAL client-side image maps. Therefor, I cannot recommend that you use external CSIMs at this time. And no, I don't like it either.

Since the map is an html file, you can use based-from-current document style of commands. You can use #jumphere as a URL, for example - and it will work!

If you are going to use based-from-current document commands, remember if you are using the map from another document, the "base" is the file that contains the map, not the "caller" document.


The Image Map file format

If you are using Map This to create and maintain your image maps, you probably won't care what a map file looks like. If so, then you can skip this section.

Currently, there are three standards for image map files: NCSA, CERN, and CSIM.

NCSA and CERN map files are stored separately from the parent html file, and are specially formatted text files. CSIM "files" are actually part of the parent html file.

NCSA: National Center for Supercomputing Applications

NCSA's format looks like this:

#comment

rect URL x1,y1 x2,y2

circle URL cx,cy x1,y1

poly URL x1,y1 x2,y2 x3,y3 ...

NCSA interprets any line that starts with the '#' sign to be a comment for a human, and ignores it. Map This further extends this in a safe manner by placing a dollar sign after this, so you get the digraph #$. Map This uses these special lines to keep tracking information about the image, author, and other information in the map file.

Lines that start with the word "rect" are rectangles. These are the most common area types. The URL is the item attached to this area, and the x1,y1 x2,y2 coordinates are used to define the box that covers the rectangle. The picture below show what this looks like.

circle lines look exactly like rectangle lines. However, the first pair of numbers is the center of the circle, and the second pair represents a point on the edge of the circle. Confusing, right? The picture below shows a circle with the center position given as 75,40, and a point on the edge as 100,40 - this makes the radius equal to 25.

poly means "polygon". After the URL comes several pairs of numbers. Each pair represents a vertices in the polygon. The picture below shows a simple 3-point polygon.

CERN: European Laboratory for Particle Physics

CERN's format looks like this:

rect	(x1,y1) (x2,y2) URL

rectangle	(x1,y1) (x2,y2) URL

circ	(cx,cy) r URL

circle	(cy,cy) r URL

poly	(x1,y1) (x2,y2) ... URL

polygon	(x1,y1) (x2,y2) ... URL

Servers that use the CERN format usually allow for both the shorthand (rect, circ, poly) and the longhand (rectangle, circle, polygon) of the name.

As you can see, CERN's format looks very similar to NCSA's format - the only difference is that CERN puts the numbers before the URL, and brackets the numbers with parenthesis.

CERN also defines the circle in a more understandable format - center, then radius.

However, CERN doesn't allow for comments in the file. This causes problems with Map This and other programs that rely on these comments. Map This works around this problem by placing a special area in the map that defines a rectangle that is outside of any possible image, and encoding the comment text into that "areas" URL.

CSIM: Client Side Image Maps, HTML 3.0

CSIMs are not "flat" files like NCSA and CERN - they are part of the actual HTML document. As such, they look extremely weird to the normal user.

<MAP NAME="refname">

<AREA SHAPE=method COORDS="positiondata" HREF="link" ALT="comment" TARGET="targframe">

...more of same...

</MAP>

The CSIM is started with the <MAP...> opener and closed with the </MAP> - just like standard HTML.

refname is the reference name of this map. This is similar to a "page anchor" idea, where you refer to a jump-to link by "#whatever". All CSIM HREF callers use refname like either of these:

<IMG SRC="pic.gif" USEMAP="#refname">	- map is in the same file as the caller

<IMG SRC="pic.gif" USEMAP="xyz.html#refname">	- map is in another file.

method is the method of the data. CSIM supports only three methods: RECT, CIRCLE, POLYGON. NetScape and Map This supports a fourth type: DEFAULT, which defines what to do if the user clicks outside of an area. Each method determines what the position data is. If this is missing, then the method defaults to RECT.

positiondata is a collection of numbers, separated by commas, and is specific for each method type:

Rectangle: x1,y1,x2,y2 (notice the comma between the pairs). Defines the top-left and bottom-right of the rectangle.

Circle: cx,cy,r - center position and radius. Just like the CERN format - true circle only.

Polygon: x1,y1,x2,y2,...xn,yn - each pair is separated by a comma. Each pair defines a vertices of the polygon.

link is the html link. It can be either a reference or an absolute link. References from the base document depends on either the map is internal to the caller, or external. The references are taken from where the map is stored at, not where it is called from. See More About CSIMs.

comment is the comment for this item. This can be shown to the user by the browser, or may be used by the browser to show a list of items to choose from.

targframe is the target frame for this item. Map This supports the HTML3 feature of jumping from one frame to the other within a web page. This is consider a Really Advanced Thing, and shouldn't be attempted by someone who hasn't already master both Frames and Image Maps separately.


FROM HERE ON DOWN IS THE DIALOG BOX CONTEXT HELP


Map This Toolbar
Map This Toolbars

Map This is, by design, loaded with features and tools to make creating and maintaining image maps pretty simple. Using these tools is very straight-forward matter.

The toolbars are separated into two sets. The Main Toolbar contains the global operations (new image map, open existing, preferences, cut/copy/paste, etc.). The Mapping Toolbar contains the tools that deal with the image map that you are working on. The distinction between the two is simple: the Main Toolbar affects all open image maps you are working with, while the Mapping Toolbar only affects the image map "view" it is attached to.

The toolbars can be "pulled off" from the window that they are "docked" to. You can move each toolbar around or attach them to the sides of the window that they were originally attached to - you cannot move one toolbar to another window.

Main Toolbar (each button is help active)

Mapping Toolbar (each button is help active)

Other related subjects: New Image Map; Right-Click; Guides; Grid Settings; Map Info; Area List; Edit Area Information; Using the drawing tools.


Lets you create a new image map. Same a File->New.


Open an existing image map. Same as File->Open.


Brings up the Preferences dialog.


Copies the currently selected area to the clipboard and deletes it from the image map. You can then paste the area into the image map or another image map.


Copies the currently selected area to the clipboard. You can then paste the area into the image map or another image map.


Pastes the area from the clipboard into the current image map. You can paste the same area multiple times, duplicating it.


Shows the way-cool graphical about box for Map This.


Opens this help file!


Re-arranges the image map windows in an overlapping or "cascading" style.


Re-arranges the image map windows in an non-overlapping or "tiled" style.


When the pin graphic is depressed, keeps Map This visible or "pinned" at all times. This makes dragging and dropping URLs from Netscape or Notepad easy.


The rectangle tool lets you draw simple rectangle areas on the map.


The circle tool lets you draw circular or oval areas on the map.


The polygon tool allows you to draw free-form areas. These areas can contain up to 64 points.


The arrow tool lets you move areas and enables the right-click on the areas.


Select Zoom In to "get closer" to the map and the graphic. You can go up to 8:1 resolution.


Zoom Out "moves you away" from the map, until you are at the normal view.


Click the Save button or press control-S to save your work. Same thing as selecting File->Save.


The Delete tool removes the currently selected area. Once it is gone, it is GONE.


Select the Grid to turn the current grid on or off. Select Goodies->Grid Settings to define the grid.


The Map Info item lets you change the map information and settings.


This tool toggles the Area List dialog on and off.


Allows you to edit the currently selected Area's Information. Same as double-clicking with the arrow tool on an area.


Allows you to view the map in a fashion similar to what a user on the Web might see.


Status Bar
The Status Bar

The status bar, located at the bottom of the Map This application's window, displays several areas or "panes" of information. The most obvious area is the largest one, on the left-hand side. This section shows either an explanation of the currently selected menu item or toolbar button, or instructions on how to use the currently selected tool. The other sections of the toolbar show various status and informational icons and values.


The red U-Turn icon shows up when you have the Shift key held down. It indicates that you are forcing Map This to scan the map backwards in order to access areas out-of-order.


The warning icon shows up to indicate that you have at least one area missing a URL. Either place the cursor over this icon to show the first area with this problem, or use the Area List box.


The green unhappy face shows up to indicate that you have at least one area that is totally covered, and that it will be inaccessible to the user. Either place the cursor of this icon to show the first area with this problem, or use the Area List box.


Shows the position of the cursor within the image.


Shows the dimensions of either the area being created, the size of the line, or the amount of movement taking place, depending on the current action.


Shows the current zoom level, from 1:1 (no zoom at all) to 8:1 (8x magnification). You can click in this spot to access the instant zoom menu.


Standard Windows' resize grab area.


Map file not created by Map THIS!
Map file not created by Map This

When Map This writes out the image map file, it includes some special comment lines in the map's data. These special lines define what image file was used and where it was last located. If you are importing an existing image map file, these lines are obviously not there, so Map This has no way of knowing which image goes with what map. It's your job to point Map This at the right file.

CSIM "files" are usually stored in the HTML file that uses them, and Map This can usually locate the correct image reference for that map, saving you this step. Not always, though!

If you point Map This at the wrong file, you can change it easily by pulling down the file menu and selecting Change Image. Then select the new image file you wish to use and you're all set.


Unable to locate Image

Map This maintains two special comment lines in the image map file when it writes it out to the disk: the filename of the image, and where the image was at when the map was saved. If the image or the map is moved on the disk (say, from one directory to another), Map This will try to look in the directory where the map is currently at, and where the image was last known to be at. If both of these fail, Map This gives up and asks you to find the image for it. If you manage to give it the wrong image, you will have to use the Change Image item in the File menu. The new location of the image file is not recorded unless you re-save the image map file.


Editing the map's general information

For each image map file, there is only one required line: the default URL to execute if the user clicks outside of any defined area. You can think of this as the "background" URL, if you wish.

The other pieces of information - Title, Author, Description - are all optional, and have nothing to do with the actual function of the image map.

You can click on some areas of this graphic for more information:


This is the filename of the map file. If nothing is here, then the map is brand-new and has never been saved. This is for informational purposes only.


This is the filename of the image file. This is for informational purposes only.


Title of the mapfile. This field is not required by the Web Server, but is used by CSIM files to name the map.


Author. Your name here. Optional.


Description of the map file. This field is optional, and can be used to describe what you are doing with this map file. Can be several lines long. The Web Server will not use this field.


This is the default URL. Required by most Web Servers. Not required for CSIM files. You must give it the complete URL to whatever resource you wish to activate when the user clicks outside of any defined area.


Image map format. NCSA, CERN, and CSIM are all supported.


Click this to cancel your input.


Click this to accept the data.


The Area List Box

You can have Map This bring up a floating window of your areas to get an idea of what each one is. This List Box allows you to re-order the areas, delete them, and edit their information. It also shows which areas are missing URL's by placing a warning icon next to each area.

The Area List Box behaves just like the toolbars - you can dock it to the left or right side of the image map, make it float, and resize it (to a certain amount). If you wish to keep the listbox from docking while you are moving it, hold down the control key.


Brings up the Area Info dialog box for the currently selected area.


You can grab this to drag the window around.


Shows the URL link for this area. You can type into this area to modify the URL.


List of the areas.


The unhappy face means that this area will be obscured when the map is used.


Use the scrollbar to move the list up and down.


Currently selected area.


Areas with the warning icon or highlighted in red are missing their URLs.


The Right-Click Menu

The right mouse button is the "context menu" button. You click it to bring up a floating or "popup" menu. This menu changes depending on the tool and where you have clicked.

If you have the polygon or the arrow tool selected, clicking on a polygon line will give you the option to insert a new point. Clicking on a polygon's point will give you the option to remove that point.

Right-clicking inside of any area will bring up a four-item menu that allows you to edit the area information, delete the area, or move it up or down in the list.

Right-clicking outside of all the areas (in a part of the map that has no areas) will allow you to change tools, zoom in or out, edit the map information and access the other menu/toolbar items.

Note: this graphic is rather large - you may have to use the bottom scrollbar of this window to move it back and forth.


This column shows what possible menus can appear when you click the right mouse button.


This column shows which tool can be in use to get the cursor shown and the right-click menu.


This column shows how the cursor will appear.


This is a sub-menu allowing you to change the tool you are using. The currently selected tool (in this case, the Arrow tool) is indicated with a dot in front of the name. See also Rectangle tool, Circle tool, Polygon tool, Arrow tool.


Inserting a point in a polygon place another point on the line. You can then move this point to change or enhance the shape of the polygon.


Deleting a point from a polygon removes that point and causes the lines connection the point to the rest of the polygon to "snap back" to the other two points.


Placing the polygon or arrow cursor on or very close to a polygon's line will let you make a new point on that line.


Moving the polygon or arrow cursor onto a polygon point will let you delete that point from the polygon.


Placing the cursor (any type) between the areas gives you access to this popup menu.


When the arrow tool is in use and you place the cursor on an area, the area's outline changes color and the cursor becomes a 4-way arrow.


Selecting this brings up the Grid Settings dialog box.


Selecting this brings up the Guides creation dialog box.


Brings up the Edit Area Data dialog box.


Editing Area Data

When the arrow tool is selected, you can (a) double-click on an area; (b) click once and select the pencil tool; or (c) right-click to show a pop-up menu. Any of these actions will bring up the Edit Area Info dialog box. This dialog shows information about the area, such as the type, position, and size, and allows you to enter the URL for it, and the optional comment.

Click on one of the hot spots in the image below for some more information:

NCSA and CERN format image maps:

CSIM format image maps:


This is the URL that is to be used when the user clicks on this area. Required by the Web Server. You must give it the complete URL to whatever resource you wish to activate.


Comment about this area. This comment is usually never presented to the user, and the Web Server will ignore it. Can be up to 200 characters long.


Since Client Side Image Maps are actually part of the HTML file, you can mix both image maps and frames in the same document. Setting the TARGET item allows you to jump from frame to frame.


This shows what type of area this area is. Rectangle, circle, or polygon. The type of area defines how the server and Map This use the data that is attached to this area. The position and size also reflect the type. This is for informational purposes only.


This is the position of the area. For rectangles, this is the upper-left to the bottom right. For circles, this is the center point. For polygons, this is the smallest rectangle that covers the entire area. This is for informational purposes only.


This is the dimensions of the area. This depends upon the area type. For rectangles, this is the width and height. For circles, this the radius along both the X and Y axis's. For polygons, this is the total number of points. This is for informational purposes only.


Click this to accept the changes.


Click this to reject the changes


Click this to delete the area from the list.


Click this to move the area up in the list. Areas higher (lower numbered) are checked first.


Click this to move the area down in the list. Areas lower (higher numbered) are checked last.


Snap-To Grids

Grids are great tools in getting things lined up. Enabling the Grid causes Map This to force all your mouse input to whatever "granularity" that you specify. For example, if you tell Map This that you want a grid that is space 30 pixels across and 10 pixels down, then you will only be able to place points at 0, 30, 60, 90 etc. across the X-axis, and 0, 10, 20, 30, etc. down the Y-axis.

Map This also has a very interesting feature of specify the starting position for the grid. This means that you can have the grid at 5, 35, 65, 95 across and 1, 11, 21, 31 down if you wish.


Selecting this style shows only a small cross at the grid points.


Selecting this style shows lines over the entire grid. This is the default.


Selecting this style hides the grid lines.


This box turns the Grid on or off. This is the same as selecting the Toolbar button or the menu item.


This sets the width of Grid granularity. For example, if you enter 50 here, then the mouse position is constrained to 0, 50, 100, 150, etc., across the X-axis.


This sets the height Grid granularity. If you set this to 25, then the mouse position is constrained to 0, 25, 50, 75, etc., up and down the Y-axis.


This sets the starting left-side of the Grid. Using this allows you to set where the Grid starts at. If you set this to 3, and the width to 10, then the Grid is 3, 13, 23, 33, etc.


This sets the starting top side of the Grid. Using this allows you to set where the Grid starts at. If you set this to 2, and the height is 15, then the Grid is 2, 17, 32, 47, etc.


Click this to accept the changes.


Click this to reject the changes.


Creating and using Guides

Quite often, I find that people (myself include) want to make a clickable map based on thumbnail images. While you can do this using the standard "make a rectangle" procedure, it's tiresome. And the results are not very uniform.

This is where the Guides option comes it. This dialog box allows you enter in information to tell Map This to create a series of rectangles, starting at a certain point, being so tall and so wide, so many across and down, and oh yes, space them this far apart.

The Guide box will not allow you to create Guides if the Guides will appear outside of the image, or you attempt to create more than 1024 of them.

One handy feature of the Guide dialog box is to define the Base URL for each of these new areas. This Base URL can be just the common part leading up to whatever, or you can do one very interesting thing: put the special "%d" character sequence in the line to have the program put the area number in each of the URL's that is creates.

If you have a Base URL like this:

http://system.com/images/graphic%d.gif

Then for each new area, the %d will be replaced with the area number. For example, area 1 will have:

http://system.com/images/graphic1.gif

And area 42 will have:

http://system.com/images/graphic1.gif

You are only allowed to have one %d in the entire Base URL. Yes, it is based on the ANSI C "printf" function, and no, you only get one, and only a number. Sorry.

(If you try to put something like %s or %dbob%d, Map This will assume that you meant to do that and will NOT put in the area numbers).


This displays the size of the image that you are working with. It is shown for informational purposes only.


This shows the area that will be "covered" by the Guide boxes. If this goes to red (or the red-compliment of your window text color), then you will not be able to create the Guides.


This is the width of each Guide box.


This is the height of each Guide box.


This is the left starting point for the Guides. You can use this to start the Guides away from the left side of the image.


This is the top starting point for the Guides. You can use this to start the Guides away from the top of the image.


This is how much additional space to put between the Guides as they go left-to-right across the image.


This is how much additional space to put between the Guides as they go down the image.


This is how many Guides to put across the image.


How many Guides to put down the image.


Click this to accept your values and create the Guides. Your settings will be saved so you can use them next time.


Click this to not create any Guides.


If you wish, you can put in a Base URL that will be put in each new Guide. To have the Guide generator put the area number in this, simply place one %d character sequence in the string.


Testing the Map

Once you have your areas defined, how do you check and make sure everything will work correctly? The absolutely best way is to transfer the needed files to your Web Server and test things from there. However, you may want to just see what the map would look like without the areas getting in the way. Selecting the Test Map item will bring up a dialog box informing you about the limitations of the test, and then proceed to actually viewing the image, full-screen. This is similar to a Print Preview in word processing programs.

You must still transfer the map to the server in order to get it to work, and then set the server up correctly if you need to. See Modifying your HTML file for more information.


Preferences

The Preferences dialog allows you to change the behavior and appearance of Map This. In this dialog, you can set the default map type for new image maps, whether or not to prompt for area information when you create a new area, if the default URL is really needed or not, and the colors of the outlines of the areas, in addition to other items.

For more information, click on the areas below


If this set, then any circles that are created or edited on NCSA maps are prevents from being elliptical in shape. CERN and CSIM maps do not allow ellipses.


If this set, then the handles of each area are double the normal size. This makes it easier to "grab" them, but takes up more visible room, making it harder to tell one handle from the other.


If this set, then the URL of each area is shown as you move over it.


Default map type for new image maps. You can change this per each map in the Map Info dialog.


If this is set, then Map This will automatically bring up the Area Info dialog each time you create a new area.


Most servers require the default URL to be specified. If yours doesn't, and you don't care if you have it or not, clear this box.


Select this to cancel your changes.


Select this to save your changes.


The default color is what is used to draw the area outlines when they are not selected nor being highlighted during a "flyby".


The selected color is what is used to draw the area outline when it is the selected area. Only used when the arrow tool is selected.


The flyby color is used to highlight an area when you move the arrow tool over an area.


This is what the line will look like when it is used.


Allows you to turn the handles of the areas on or off. Doing so may make it harder to change the shapes of areas, but will allow you to deal with close-fitting areas better.


Some NCSA servers disallow abuse of the circle format to create ovals. Set this to keep these circles as "true" circles, and not allow ovals.


If this set, then the areas of the map will be filled in using the pattern and color to the right.


This is the style of the fill-in for the areas if the checkbox is set. You can choose from several different patterns.


This is the color and a sample of the pattern used to fill in the area. Click this to change the color.


Opening an Image File
Opening an Image File (GIF/JPG)

Since Image Maps require an Image to place the Map on, you need to select a suitable graphic for the "background" of the map. Map This supports both GIF and JPG. There are some considerations to be aware of:

GIF is the normal graphics type used for image maps. It is decoded quickly by the browser, and all browsers support it.

JPG allows more colors and gives slightly better (on average) compression with some loss of quality (usually not perceivable by the person viewing the image). However, JPG decoding is somewhat slower than GIF decoding, and there are a few (very few) browsers that do not support this.


Saving an Image Map File

If you are saving a newly created map, or saving an old map under a new name by Save As, Map This shows you the standard "file save" dialog - with some added features. Where these features are at depends on if you are using Windows 95 or not; however, they both look very similar to this:

Windows 3.1 and NT 3.51:

Windows 95 and NT 4.0:

The radio buttons determine which format you want to save the map as. The Format Type buttons and the File Type drop-down box work together: you cannot choose a format that is incompatible with the file type, and vice-versa.

The Map Info button takes you right to the overall information about the map.

Saving the image map into an existing HTML file will take you to the Save HTML As dialog box.


Filename of the file to be saved. Pick an existing HTML file if you wish to save your CSIM file "into" it.


Click this to save the file.


Click this to cancel the save.


If you have this button, you can access your Windows' network drives.


Click this to bring the Map Info dialog.


A drop-down list box containing the file types that Map This supports.


These radio buttons determine what kind of file you will be saving. Anything changed here is changed in the Map Info settings.


Saving into an existing HTML file
Saving an Image Map into an existing HTML File

Client Side Image Maps allows you to keep more than one map in an HTML file. If you choose Save As... from the File menu, and you select an existing HTML file, Map This will prompt you for the name of the map to save "into" the file as.

Map This uses the title of the map as the name to be saved as when you are saving an HTML file.


This is the list of maps that are currently in this HTML file.


This is the name of the map to save at. This is the same as the Map Info's "Title" block. Changing it here will change it there, too.


Select this to save the map.


Select this to cancel saving.


Multiple Image Maps in a Single HTML File

One feature of Client Side Image Maps (HTML 3.0), is that they allow the possibility of putting more than one image map "file" into a single HTML file. The advantages of this is that you can place all of your image maps into one single file, and then access them as needed. The reason to use that method is that most servers are caching files (just like your own Windows machine), so it doesn't have to find un-cached files. And many browsers will cache the HTML file locally and not request it to be sent over the connection - another time savings!

When you open a HTML file that contains more than one image map definition in it, Map This will bring up a dialog asking you which map you want to load. Each map's name and associated graphic is shown (if the graphic is known). Just double-click the item, or click and select okay to load.


This map has a graphic reference that Map This was able to understand. You may still have to tell Map This where the graphic is really at.


These maps don't have a known graphic reference, so Map This will prompt you for the graphic.


Select this to load the selected map.


Select this to cancel the map load.