Building a picture map file

AOLpress logo

AOLpress Help

Creating Image Maps

See the tutorial lesson on links for a hands-on example.

AOLpress makes it quick and easy to create both client and server side image maps for the same image. First you create the image and include it in your page. Then you define the areas of the image that are linked to other pages.

Creating an image map:

Choosing the Element Image Map menu item while an image in your page that you want to turn into an image map is selected, opens the Image Map dialog below. You can resize the Image Map dialog to see more of your image.
Select a shape tool (for example, the circle tool) and draw a shape on your image.
In the Location field, type the link you want this shape to use. The link can be any link you could normally use for linked text or images. For example, mypage.htm, http://www.aolpress.com/, or mailto:myaddress@me.com. You can click the Browse button to search for a page you want to link to. (You can also provide an Anchor to link to a specific position in a page and a Target Frame to contain the page you link to.
If you type in the Location field when no shape is selected in the image, you will be asked if you want to create a default rectangle. The "default rectangle" lets you specify a link to follow when someone clicks on the image but not inside any of the other shapes you have drawn on the map.
Press the Enter (or Return) key.
Move your cursor around the image. When your mouse moves over a shape, you will see a label that shows the location of the link. Where two shapes overlap, you see the location for the shape that is on top. You can use the "Ordering" tool in the toolbar to change which shape is on top.

The toolbar to the left of the Image Map dialog lets you create and manipulate the shapes of areas that will be links.

Arrow: Use this tool to select an existing shape so that you can set a location, move, resize, delete, or change the stacking order of the shape.

Rectangle: Use this tool to create rectangular areas in your map. Then, type a location for that area. If you want to set a default location for all the parts of the image that don't have shapes, draw a rectangle around the entire image. Set the default location for this shape. Then, select the shape and use the "Ordering" tool to move this shape to the back.

Circle: Use this tool to create circular areas in your map. Hold down the mouse button on the image where you want the center to be and drag out the radius. Then, type a location for that area.

Polygon: Use this tool to create multi-sided shapes in your map. Click out a series of points which define the polygon. End the polygon by clicking on your starting point, or by double clicking, or by selecting the arrow tool. Then, type a location for that area.

Delete Shape: Click this button to delete the currently selected shape.

Delete All Shapes: Click this button to delete all the shapes in the map. (No Undo)

Magnify: Click this button to zoom in and make the image appear larger.

Reduce: Click this button to zoom out and make the image appear smaller.

Ordering: Select a shape, then click this tool to select from a menu that lets you Bring to front, Bring forward (one layer), Send backward (one layer), or Send to back. If two shapes overlap, the link for the shape in front is used.

Save: Use this button to save your changes. You will see a dialog that looks like the one to the right. By default, AOLpress creates both a server-side map file for use on the AOLserver (with an extension of .nvm) and client-side map information, which it stores in your page with the name you specify. You can uncheck one of the fields if you don't want to create both types of map files.

Close: Click this button to close the Image Map dialog. You will be prompted to save any changes you have made.

Help: Click this button for online help on making image maps.

You can see the .nvm file you create for server-side image maps in the MiniWeb view. If you delete an image map from a page (by highlighting it and pressing the Delete key), the actual image and image map files are not deleted. To delete the files, you can use File Delete or select and delete the files' icons in the MiniWeb view.

More About Creating Image Maps

If you did not get the shape quite right when you specified it, you may alter it later. If you select a shape (by clicking inside it with the arrow tool) you may drag it around to reposition it. You may also drag the handles to resize a shape. (You may resize the width and height proportionally by holding down the shift key and dragging a corner.) For polygons you may click on a point in the polygon and drag it around to reposition it.

You may delete a point from a polygon by selecting it (click on the point) and then pressing backspace or delete (or using the trash can tool). You may insert a point into a polygon by control-clicking on top of one of the lines of the polygon.

You may also adjust the shape with the arrow keys: Select the shape, handle or point which you wish to change and then press the arrow key. This changes the selected thing by one pixel in the obvious direction.

Selecting a shape and pressing backspace, delete or using the trash tool will delete that shape.

Keyboard Short-cut Key Sequences

backspace & delete: Delete the currently selected object.
tab & return: Moves the focus between the URL field and the image.
Next or Page Down: Selects the next shape.
Prev or Page Up: Selects the previous shape.
Control-Next (Page Down): Selects the next point in the current shape.
Control-Prev (Page Up): Selects the previous point in the current shape.
Control-Home: Moves the currently selected shape up one layer.
Home: Moves the currently selected shape to the top (not active on Windows versions).
Control-End: Moves the currently selected shape down one layer.
End: Moves the currently selected shape to the bottom (not active on Windows versions).
Arrow keys: Move the currently selected shape or point one pixel in the obvious direction. If a handle is selected the shape is resized by one pixel in the obvious direction.
Control-E: Expands (magnifies) the image.
Control-R: Reduces the image.
Control-S: Saves the image
Control-Q: Closes the window.

Help Table of Contents

	Arrow: Use this tool to select an existing shape so that you can set a location, move, resize, delete, or change the stacking order of the shape.
	Rectangle: Use this tool to create rectangular areas in your map. Then, type a location for that area. If you want to set a default location for all the parts of the image that don't have shapes, draw a rectangle around the entire image. Set the default location for this shape. Then, select the shape and use the "Ordering" tool to move this shape to the back.
	Circle: Use this tool to create circular areas in your map. Hold down the mouse button on the image where you want the center to be and drag out the radius. Then, type a location for that area.
	Polygon: Use this tool to create multi-sided shapes in your map. Click out a series of points which define the polygon. End the polygon by clicking on your starting point, or by double clicking, or by selecting the arrow tool. Then, type a location for that area.
	Delete Shape: Click this button to delete the currently selected shape.
	Delete All Shapes: Click this button to delete all the shapes in the map. (No Undo)
	Magnify: Click this button to zoom in and make the image appear larger.
	Reduce: Click this button to zoom out and make the image appear smaller.
	Ordering: Select a shape, then click this tool to select from a menu that lets you Bring to front, Bring forward (one layer), Send backward (one layer), or Send to back. If two shapes overlap, the link for the shape in front is used.