mapedit 2.25

Mapedit takes advantage of the gd graphics library, by Thomas Boutell, copyright 1994, 1995, 1996 by Cold Spring Harbor Laboratory. gd, in turn, benefits from GIF compression and decompression code made available by David Rowley and David Koblas, respectively. JPEG support is based in part on the work of the Independent JPEG Group. PNG support is based on LIBPNG, made available by Guy Eric Schalnat of Group 42, Inc. in association with Dave Martindale, Paul Schmidt and Tim Wegner.

What's New in Version 2.25

Version 2.25 of Mapedit for the X Window System corrects a bug which prevented users from converting existing server side maps to client side successfully.

What's New in Version 2.2

Version 2.2 adds easy-to-use toolbars, support for Netscape frames, numerous bug fixes, and convenient registration facilities.

Version 2.0 of Mapedit introduced several new features:

Client side imagemaps are now supported. Mapedit can edit HTML files directly to insert client side imagemaps.

GIF, JPEG, and PNG-format images are all supported.

By popular demand, hotspots can be moved, and individual points can also be moved, added and deleted.

Images are now loaded much more quickly, and image display quality has been greatly improved for all graphics drivers.

Many problems have been fixed, and the software has been enhanced to become more user-friendly.

The enter key is now accepted as a substitute for the right mouse button when creating polygons, and this is now the only place where the right mouse button is expected. The circle and rectangle tools still accept the right mouse button for compatibility.

What is Mapedit?

Mapedit is a WYSIWYG (What You See Is What You Get) editor for imagemap files.

Server-side imagemap files are a feature of NCSA, Netsite, O'Reilly, CERN/W3, and practically all other httpd servers; they allow you to turn a GIF into a clickable map by designating polygons, circles and rectangles within the GIF and specifying a URL for each to link to. Client-side imagemaps, which are available in the very latest web browsers, can do all of the above without the help of a special program on the server.

Unfortunately, creating good image maps by hand is a lot of work, because the points must be located using an editor not explicitly designed for the purpose.

mapedit allows you to load your image into a scrollable, resizable window and then draw polygons, circles and rectangles on top of it, specifying a URL for each. It also allows you to go back and delete these "hotspots", set a default URL for clicks outside of the "hot" areas, and so on. In addition, it allows you to associate comments of arbitrary length with each object if you are creating an NCSA-format map. (Most servers are compatible with the NCSA setting.) If you are creating a client-side imagemap, you can provide alternate text to be shown to users of non-graphical browsers.

How do I install imagemaps?

Before investing a great deal of time and effort in using Mapedit for Windows, please read the following.

"How do I install client-side imagemaps?"

If you use client-side imagemaps, all you need is an HTML document containing inline images! Client-side imagemaps work do not require a web server. Just make sure both the document and the images are present on your drive, and use the Open/Create dialog to open the HTML document. Mapedit will insert the proper tags into your HTML document when you save your work.

However, client side imagemaps are ONLY compatible with the very latest web browsers. If you cannot require your users to use one of these browsers, you will want to use server-side imagemaps or use both types for the same image. Check the following list:

Netscape 2.0 beta 4 or better

Microsoft Internet Explorer

Spyglass Mosaic 2.1 and derivatives thereof

"How do I install server-side imagemaps?"

Unlike client-side imagemaps, server-side imagemaps are supported by all web browsers. This time, the difficulty is that you must have access to an actual World Wide Web server on which cgi scripts, specifically the imagemap program (not this program!), have been installed. Also consult the administrator of your web server and the documentation of your web server.

For more information about using imagemaps with the NCSA httpd and compatible web servers, see the following URL:

http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemapping.html

The server does NOT have to reside on your MS Windows system, although that is possible. You can run Mapedit to your heart's content without a server, as long as you upload the resulting imagemaps to the server and install them correctly.

If you are unfamiliar with web servers, we suggest you consult the World Wide Web FAQ, available at the following URL:

http://www.boutell.com/faq/

How do I get started editing an imagemap?

Mapedit's menu bar contains a File menu, a Tools menu and a Help menu. Most options are also available from the graphical toolbar. Initially most options are disabled, since you have not yet opened a document.

Using the mouse, pull down the File menu and select Open/Create Map. A dialog box will appear.

In the upper field of this dialog box, you should enter the name of an existing HTML document (for client-side imagemaps) or a .map file (for server-side imagemaps). You can use the Browse button to explore your existing files easily. If you wish to create a new server-side .map file, be sure to select the correct type (NCSA or CERN; most servers are compatible with NCSA).

In the lower field, enter the filename of the image the map will describe. If you have selected an HTML document in which to edit a client-side imagemap, then this field will usually be filled out for you.

The image, which can be in GIF, JPEG, or PNG format, must already exist. Mapedit is not a paint program. To create your own images, use any paint program, such as Windows Paintbrush. Conversion utilities are widely available to convert .bmp files into other formats.

Click on OK when you have entered the filenames.

For server-side imagemaps, if the map file does not already exist, you will be asked if you want to create it. Click on OK to continue. If the map does exist, mapedit will automatically determine the server type of the file regardless of the radio button setting; you can change the file's type later to accommodate a new web server using the Save As... dialog box.

For client-side imagemaps, Mapedit will examine the HTML document to make sure that the syntax is reasonable. If your HTML document contains errors, Mapedit will warn you about them. Next, Mapedit will prompt you to select one of the inline images in the HTML document you have chosen.

mapedit will now load your image into memory. This will take a few moments, depending on the size of the image.

When the image has been loaded, it will appear in the main mapedit window, which should expand or shrink to suit the image. If the image is large, scrollbars for horizontal and vertical movement will appear.

You can navigate the image using the scrollbars; you can also resize the window as needed. \page

How do I make "hotspots"?

Image maps consist of areas that have been designated as "hotspots" which users can click on to fetch particular URLs. Mapedit allows you to draw these graphically on the screen.

How do I specify rectangles?

How do I specify polygons?

How do I specify circles?

How do I specify rectangles?

If the Rectangle tool is not already checked in the Tools menu, then select Rectangle from the Tools menu. Next, click the left mouse button in one corner of a rectangular region of interest in the image. Now move the mouse pointer to the opposite corner, tracing out a rectangle. (You do not need to hold down the mouse button.) To complete the rectangle, click the mouse button again. You will then be prompted for a URL.

More information about entering URLs

Entering URLs

When you complete a hotspot, the URL window will pop up, prompting you for the URL that this hotspot should link to. The URL you enter should be a legal URL. For example:

http://www.boutell.com/mapedit/

Relative URLs are also acceptable. Do not enter HTML tags in the URL field; only the URL is needed.

If you are creating an NCSA-format server-side imagemap, add any comments you wish in the comments window. These comments are purely for your own convenience.

If you are creating a client-side imagemap, be sure to enter a text alternative for each hotspot. When your page is viewed by a web browser that does not support graphics, the user will be presented with a menu of the text alternatives, instead of an image. (Not all text-based browsers understand text alternatives at this time.)

When you have completed your entry, click on OK or press RETURN to continue. The RETURN key only has this effect in the URL field, since multiple-line comments are allowed in the comment and text alternative window fields.

The hotspot will now be drawn completely. For polygons, a final side between the last point and the first point will be added automatically. If the outline is not easily visible on this image, try selecting Edit Hotspot Color from the File menu.

How do I specify polygons?

Select Polygon from the Tools menu to begin drawing a polygonal hotspot. Now click the left mouse button at some point on the edge of an area of interest in the image.

Move the mouse pointer to another point on the edge of the area of interest, tracing its outline. Note that a "rubber-band" line follows you from the point of the initial click.

Click again at this second point. Continue clicking points until you have outlined all but the final connection back to the first point. (You do not need to hold down the mouse button.)

Note that if you don't like the way your polygon is turning out, you can press the ESC key to cancel it. Then, start over with the left mouse button.

To complete the polygon, click the right mouse button, or press the ENTER key if you have assigned a different purpose to the right mouse button.

More information about entering URLs

How do I specify circles?

Select Circle from the Tools menu. Circles work just like rectangles, except that the left mouse click positions the center of the circle, and you can then move the mouse pointer to any point on the edge of the desired circle and click the mouse button again to accept it. You will then be prompted for a URL.

More information about entering URLs

Editing the hotspot color

You can edit the hotspot color by selecting Edit Hotspot Color from the File menu. You will be presented with a color selection dialog box, in which you can click on a color of your choice. Look for a color that contrasts well with the colors present in your images.

Mapedit will remember your choice of color indefinitely.

How do I test my hotspots?

Select Test/Edit from the Tools menu. Now click at various points in the image. When you click in a hotspot, such as a polygon, rectangle or circle you have designated, the URL window will pop up, showing the URL assocated with that hotspot. Also, the region within the hotspot will be displayed in reverse video.

Important note: when hotspots overlap, the oldest gets the click. This is important because this is how the actual imagemap program will behave when your users click on your map in practice.

How do I go back and edit URLs and comments?

Often you will not know the final URL for each hotspot at first, or you will want to change it. You can do so by selecting Test/Edit from the Tools menu and clicking in the hotspot in question, editing the URL that appears, and then clicking on OK or pressing RETURN. You can also edit in the comments window at this time. (The RETURN key does not dismiss the popup while in the comments window; click on the OK button instead.) Note that you can cut, copy and paste in the URL window and URL Comments window using the control-x, control-c and control-v keys (just as in all other Windows applications).

How do I delete unwanted hotspots?

Select Test/Edit... from the Tools menu. Note that a Delete button appears in the URL dialog box when you select a hotspot. By clicking this button, you can remove that hotspot from the map.

Information about removing individual polygon vertexes

How do I move hotspots and individual points?

To move an existing hotspot or one of its corners, first select the Move tool from the tools menu. Next, click on the hotspot you wish to move.

Note that the corners of the hotspot are now highlighted. The center of the hotspot is also highlighted. You can click, hold and drag any of these points with the mouse. Dragging the center moves the entire hotspot.

How do I add points to polygons?

To add points to an existing polygon, first select the Add Points tool from the tools menu. Next, click on the polygon of interest. The polygon will be highlighted.

Next, click anywhere in the image to add an additional point to the polygon. The polygon will grow to accommodate the extra sides.

If you wish to add additional points, select the polygon again each time.

How do I remove points to polygons?

To remove points to an existing polygon, first select the Remove Points tool from the tools menu. Next, click on the polygon of interest. The vertexes (corners) of the polygon will be highlighted.

Next, click on the vertex you wish to remove from the polygon.

If you wish to remove additional points, select the polygon again each time.

Information about removing entire hotspots

How do I set a default URL?

There is one more component in an imagemap file: a default URL to be loaded if the click is not in any region. To set a default URL, pull down the file menu, select Edit Default URL..., and enter a default URL in the window that appears. Click on OK or press RETURN to accept it.

You can test the default URL by clicking outside of any defined hotspot when using the Test/Edit tool.

You may wish to get rid of the default URL completely. Once you have set a default URL, a Delete button will appear in the Edit Default URL dialog box. Click this button to remove the default URL.

How do I target a hotspot to a specific frame?

Be sure to use client-side imagemaps. Mapedit 2.2 provides a separate field in the URL dialog box in which to enter the target frame. If the new document should erase all currently displayed frames and occupy the entire browser window, enter _top in the target field. Other special target values documented by Netscape will also work. If this field is left blank, the new document occupies the frame that contained the imagemap.

How do I eliminate the blue border around my image?

This is actually an HTML question, not an imagemapping question. Here's the answer: for Netscape and other browsers that support it, you can add the BORDER="0" attribute to your <IMG> tag.

Example: <IMG SRC="foo.gif" USEMAP="#foo" BORDER="0">

IMPORTANT NOTE: many users depend on this visual cue to identify images that link to other documents. If you remove the visual cue, be sure to make clear that the image should be clicked upon in some other way.

How do I save my work?

Pull down the file menu and select Save. mapedit will write your map to the file you specified when you opened it.

If a problem is encountered while writing this file (if you entered a bad path when you first created the map, for instance), use the Save As file menu option to enter a new name for the map file.

Can I edit my existing imagemap files?

Yes. Mapedit can read existing imagemap files in the CERN, NCSA, and client-side formats without difficulty.

Can I convert between imagemap formats?

Yes. Use the Save As file menu option and click on the appropriate button for your preferred format, then click OK to save your map in the new format.

If you convert a client-side imagemap to server-side, alternative text fields will become comments. If you convert any other format to the CERN format, comments will be discarded.

If you convert a server-side imagemap to client-side, Mapedit will create a simple HTML document containing an inline image tag which points to the image you used when editing the map. This is done primarily as a demonstration. You can of course paste the map tags into any HTML document of your choice, and set an appropriate usemap attribute for the inline image.

For more information

If you have any difficulties with mapedit, feel free to contact Boutell.Com technical support. Send email to mapedit@boutell.com. Please read this manual thoroughly first. Also see the following URL for more information about the latest and greatest version of Mapedit:

http://www.boutell.com/mapedit