Editor's Note: Internet and homepage capability provide an opportunity for the offices to develop experimental service products and conduct tests/evaluations with various user groups at very minimal costs. This Technical Attachment (TA) highlights a very simple but user-friendly approach to graphically select products.

Introduction

Homepages can be set up using several different formats: simple HTML code, image maps, and Java Applets. During the last several months, a few Western Region (WR) sites have begun to link maps to forecast text. This link allows the user to select a point on a graphic map, the software then displays the observation for a forecast associated with that area of the map. This TA documents how to create image maps.

An image map is a picture divided into several areas. When an area is selected, a link is made. This link may take the user to another homepage, another area of the same homepage, or to specific data related to the area chosen from the image map. Image maps help to produce professional and user-friendly world wide web (WWW) pages.

There are three step to creating an image map:

1. Obtain or create an image (GIF format) file

2. Create a MAP file

3. Reference your MAP file using HTML code

Creating the Image Map

First: the Image. There are a number of image creation and editing programs that may be used to construct an image. Two examples are Corel Photo Paint (DOS compatible software) and Xpaint (UNIX compatible software). It is important to note that all image files, regardless of which program is used to create the files, need to be saved as GIF files.

Corel Photo Paint was the editing program used for the Western Region Homepage. It has the capability to scan in a hard copy of an image, combine several images, or create an image from scratch. Corel Photo Paint is the software that was delivered with the new HP scanners, therefore, it should be available to all WR offices. If the image is created using Corel Photo Paint, you will need to FTP the file to the homepage server.

Xpaint is also available to use when creating an image file. This program can be downloaded from the WR server, in /users/http, titled xpaint-2.1.1.tar.Z. (We could not find an FTP site for xpaint.) Once the file has been downloaded, it will need to be decompressed and installed.

Decompression

1. At a UNIX prompt type uncompress xpaint-2.1.1.tar.Z

2. Type tar -xf xpaint-2.1.1.tar

Installation

1. Type cd xpaint

2. Type xmkmf

3. Type make

Second: the MAP File. A MAP file contains the coordinates of each geometric region you wish to make active and the corresponding URL links. More generally, the MAP file maps regions of the image to given URLs. Mapedit is a user-friendly program which creates MAP files.

For those people whose homepage is on the WR server, Mapedit is available on this system. Otherwise, Mapedit can be downloaded from http://www.boutell.com. Mapedit is not shareware; and a $25 registration fee is required.

1. After Mapedit is properly installed, at a UNIX prompt type Mapedit to start the

program.

2. Under the File menu, go to open/create map. A dialog box will appear.

3. Give the full path name of your MAP file (".map") and your GIF file (".gif"). The MAP

file does not need to exist before you start the program, but it does need a MAP file

name. The GIF file needs to be created before you start the Mapedit program.

4. Click on OK. If your MAP file does not already exist, another dialog box will appear

asking if you want to create the file. Click OK.

Once the image has been opened, you can outline the desired regions. The menu at the top will allow you to select circle, polygon, or rectangle shapes.

Outline Using Circles

1. Click with the left mouse button in the middle of the image.

2. Move the mouse out to expand the circle. If the circle is not placed where you want

it, simply click the right mouse button to undo your work.

3. Click the middle mouse button, and a dialog box should appear.

4. In the dialog box, you can edit the URL (make sure the cursor is in the area where

you want to type). The URL should be one of the following forms:

a local URL: /htdocs/file.name

a full URL: http://www.wrh.noaa.gov/file.name

Note: If you will be using access authentication-protected documents through your

image map, you must use fully qualified URLS, for example

http://your.server.com/path/to/protected/file.html

otherwise access will be denied.

5. A comments line is also available for any additional information.

6. Click OK after entering the information.

Outline Using Rectangles

1. Click with the left mouse button in the corner of the image you are outlining. In the

upper left corner, drag the mouse button over the image to expand the rectangle to

the needed size to the lower right corner. (If the rectangle is not outlined this way,

the image map may not function correctly.)

2. If the rectangle is not satisfactory, use the right mouse button to undo your work.

3. Use the middle mouse button and edit your URL.

Outline Using Polygons

1. Click with the left mouse button at every point that you would like a vertex. (You do

not need to hold down the mouse button.)

2. To undo the entire polygon click right mouse button.

3. Use the middle mouse button to edit your URL.

Default Region

1. The region on the GIF that is not outlined is called the default region. The default

region may also be set up as a link.

2. Under the file menu, choose Edit Default URL.

3. Edit the URL in the dialog box that will appear.

Each method is evaluated in the order it is placed on the image. If you have overlapping areas, such as a circle inside of a rectangle, you should outline the shape you want evaluated first before outlining the other with Mapedit. When complete, a MAP file is generated with the MAP file extension (i.e. ".map").

The MAP file generated using Mapedit will look similar to the following if viewed with an editing tool:

method is one of the following:

default - For the default URL

Coordinates: none

circle - For a circle

Coordinates: center edge point

poly - For a polygon of at most 100 vertices

Coordinates: Each coordinate is a vertex.

rect - For a rectangle

Coordinates: upper-left lower-right

point - For closest to a point

Coordinate: the point

coord - Each coord entry is a coordinate, format x, y. The number of coordinates depends on the method.

If preferred, other methods for creating MAP files can be found. A MAP file can be created without the use of a MAP-generating program, by using xv to locate the coordinates and manually creating the MAP file.

Third: Referencing the MAP File in HTML Code. HTML code needs to be created to reference the map.

Image map, a CGI program, resides on the WR server. This program resides in the cgi-bin directory. For those not on the WR server, the image map program should be located in the cgi-bin directory on your server. The image map program interprets the coordinates and links within the associated MAP file.

The HTML code needs to be inserted into your homepage code. Using the internal image map support of NCSA HTTPD 1.5:

<A HREF="/cgi-bin/imagemap/user_directory/image.map">

<IMG SRC="/user_directory/image.gif" ISMAP> </A>

User_directory is where your homepage is saved. For example, the image map for the WR Headquarters is located in the user_directory, wrh. The image resides in a sub_directory of the WR user_directory, so to reference the image: "/wrh/PICS/image.gif" (where PICS is the directory in which the image lies).

An example taken from the WR image map:

<A HREF="/cgi-bin/imagemap/wrh/home.map">

<IMG SRC="/wrh/PICS/home.gif" ISMAP> </A>

Summary

Image maps make it easy to link text products to the visual tool of an image. The incorporation of image maps into the WWW makes the information included in the image map readily available to the public. David Zaff (NWSFO/SLC) was one of the first to use this approach on a homepage. His and other examples of image maps are listed below.

NWSFO/SLC = http://nimbo.wrh.noaa.gov/Saltlake/slc.noaa.html#Utah forecasts

WRH/SSD = http://www.wrh.noaa.gov

NWSFO/BOI = http://www.boi.noaa.gov/gdforecast.html

NWSFO/SEA = http://www.wrc.noaa.gov/nws

NWRFC = http://www.nwrfc.noaa.gov