You can't adjust a rectangle once you have placed it, but there is an 'Undo'
in the 'Edit' menu, so you can try again.
You can also use the Access Panel for a rectangle to
delete it later, change its default name, or move it in the list.
Once the map has been completely specified, you use 'Save as HTML Map'
in the 'File' Menu to open a SavePanel in the usual way.
Our example file comes out as follows:
<html -- DON'T COPY THIS TAG> <MAP name="map1"> <AREA SHAPE="RECT" COORDS="76 136 114 181" href="AAA0"></AREA> <AREA SHAPE="RECT" COORDS="108 135 144 155" href="AAA1"></AREA> <AREA SHAPE="RECT" COORDS="142 127 187 146" href="AAA2"></AREA> <AREA SHAPE="RECT" COORDS="187 117 231 134" href="AAA3"></AREA> <AREA SHAPE="RECT" COORDS="221 100 256 135" href="AAA4"></AREA> <AREA SHAPE="RECT" COORDS="255 95 290 143" href="AAA5"></AREA> <AREA SHAPE="RECT" COORDS="0 0 342 268" nohref></AREA> </MAP> <IMG SRC="diagram.gif" usemap="#map1">This is just sufficiently "HTML" for NetPositive to be able to display it directly as such. The default folder is the one with your original image, so you should simply be able to double-click to test it. You will presumably want to paste the map into the rest of your web page text, and you can do this bodily except for the very first line, which is only there so that NetPositive will behave.
The href links are shown as default names, assuming that they have not already been changed to something more appropriate using Access Panels. These defaults are just numbered dummies that make it easy to identify the areas when you are testing. (They show up in the status message at the bottom of the NetPositive window.) You will eventually need to edit them into the appropriate true URLs of course. In the present example, you would want all the middle ones (covering the arrow) to be given the same link; only 'AAA0' and 'AAA5' actually mark other elements -- the image and application icons respectively.
The final area in the list is a bit different. It represents the entire rectangle of the image, and is required to ensure that clicking elsewhere than on an intended live spot doesn't result in 'File Not Found'. By default it is marked 'nohref', meaning that it links to nothing, but of course you could give it a specific href instead if it was appropriate.
You are quite likely to be able to use the rest of the map as-is, but circumstances may require editing other bits. The map is always named "map1", which is fine if it's the only one on the page. If there are others you will have to choose distinct names for each. The image source reference might also need adjusting.
Access Panels
Pressing the secondary mouse button (usually the right one) inside a
previously-drawn rectangle brings up a little panel where you can change
its 'name tag'. It also gives you a limited ability to change its position
in the list of rectangles.
The panel shown here is not in its latest form (the expected number of users doesn't warrant updating!) The label on the third button is now To Last, which is hopefully slightly less ambiguous. The panel now also shows the current position of the rectangle in the list (output order). Unlike the previous version, the To Last and Delete buttons do not take effect until OK is clicked; you can bail out with Cancel.
The text-control in the panel shows the name currently attached to the rectangle. This becomes the URL in the AREA tag when output as HTML. If you blank the text entry, that AREA will be specified 'nohref" instead of with "href=...". When BRects are output, the name, if present, is simply attached as a comment.
The button in the panel marked To Last moves the rectangle to the end of the list. Note that if two rectangles overlap, in the common area it is the first drawn that will be found by a right click. Remember that the areas in a map are scanned in order, so that an earlier rectangle will hide a later one if it overlays it. If you don't like the order in which you drew them, you can fix things with this button. If the accessible one happens to completely overlap the other, you will only be able to get at the latter by moving the first with the To Last button.
The Delete button does the obvious. Note though, that there is no
'Undo' option in the Edit menu (or elsewhere) to restore a deleted rectangle
(nor to put one that has been moved with To Last back to its old position).
The basic functionality of the ImageMapper works fits this objective quite well, so it also provides an option for writing a file of (BeOS API) BRect specifications rather than an HTML map. You can then paste these items into the actual code that generates the panel. (Only the BRect specifications themselves are output, without statement terminators.)
In this form of file, the first BRect represents the bounds of the entire image, and the specified areas follow in order. The file is of type "Source Code", so that it will open by default in your standard code editor.
Reloading a Map file
ImageMapper is now capable of reloading map files that it has generated.
(You'll normally want to load them on top of the original image, but the
program doesn't know or care...) If the image has already been loaded,
simply drag the map file's icon onto that window, and it will overlay the
image with the original rectangles. You can also drop the file onto the
app's own icon, provided that the associated image was the last one loaded.
You can even multi-select images and their map files before dropping them
all on ImageMapper, as long as you do the selection in the correct order,
alternating images with their maps.
The program will try to read any file of mime type 'HTML' or 'Source Code', but it expects the text of the files to be in the format it generates, and is not very forgiving of editing. Keep the originally generated file around. Be aware that in particular, it needs an 'href=...' attribute to recognize an AREA element in an HTML file. The first 'BRect', if a file is in that format, is assumed to be the image dimensions, and is ignored. In general it just skips initial lines that it doesn't understand, and quits when it comes to the end of ones it can parse.
This program can only specify rectangular areas, even though an HTML map can contain circles and polygons as well. You still might find it a help in delineating such areas, though -- mark the bounding square of a desired circular area, for example, and calculate the required centre and radius values from this.
The program uses the standard BeOS Translator scheme to read images, so it will display any image for which you have a suitable handler. Also, of course, for a web page your image has to be in a generally supported format, which pretty much limits you to GIF, PNG, or JPEG.
This is still a pretty bare-bones program, and could probably benefit from still further features...
Pete Goodeve
email: pete.goodeve@computer.org