Tools - Link Map Editor

The window is used to generate a map of links (the MAP tag in HTML).

The tool can be launched from the menu The main menu / Tools / Directors (or Graphics and Multimedia), as well as from the toolbars. The command icon is shown above.

The window is divided into several parts:

Defined areas
Contains a list of defined areas of the map.

General map settings tab
Contains general settings, such as the name of the map, the location of the graphics, the styles used, etc.

Defining areas tab
Contains a preview of the image file and allows you to draw active areas on the image.

Settings for selected areas
Contains settings for the selected area.

Defined areas

The list contains the names of the areas you have defined for your map. Click an area name to select it. Area names are created based on the contents of the ALT attribute specified in the Selected Areas Settings tab.

The icon next to the area name tells you what type of area it is:

rectangular area,

oval area,

irregular area.

Using the buttons in the menu to the right of the list, you can add, indicate, or delete areas defined for the map.

General map settings

In this tab, you can indicate the graphic file for which the map will be created, enter the name of the map, define the style or select the CSS class for the image.

• Map name - specify the name of the map that will be used to connect the map to the appropriate image (usemap attribute in the IMG tag and name attribute in the MAP tag).
• Default link - enter the default link. It will be used if an area outside the defined map areas is clicked

• Location of the map graphic - enter the path to the graphic file. You can use the graphic viewer launched by the button on the right side of the field.
• Image description - enter a description for the image that will appear instead of the image, if the user does not have images enabled. The description will help him get an idea of what the picture shows.

Insert link map into clipboard
Check if you do not want to insert the tags of the generated map into the document directly next to the image, but copy it to the clipboard to paste it elsewhere (for example, at the beginning of the document).

Definition of style
This group allows you to define the style for the image. Here you will find three fields that allow you to specify:

• Style - In this field you define the style for the image to be placed in the document. The button next to it launches the style editor tool that allows you to create a style definition in a friendly and convenient way. By clicking there you can also modify an existing style.
• Class - In this field you specify the class ID assigned to the tag. The drop-down list allows you to access classes defined in the current document and in external style sheets attached to it. The button next to it launches the tool for creating a new class.
• Identifier - Here you provide a unique identifier for this element in the document. These identifiers can be used, for example, when making jumps to specific parts of the page or in scripts.

Defining areas

In this tab you can define the active areas of your map. You can adjust the preview to make your work easier:

• Magnification - select from the list the scale at which the preview should be displayed,
• Units - select from the list the units to be used as line scale

Defining areas
The main part of the tab is the preview window, displaying the image for which the link map is created. In the same window, you can draw active areas of the map, for which you will then be able to provide links, etc.

To create an active area, select its type from the menu to the right of the Defined Areas list (rectangle, ellipse, irregular). Then select the portion of the image that you want to be a reference in the image:

Defining a rectangular or ellipse-shaped area
After selecting a rectangle or ellipse shape (icons shown opposite), left-click on the image where you want to start drawing the figure and, while holding it down, drag. A preview of the shape will be visible as a marquee drawn with a dashed line. When you release the mouse button, the shape will be filled with a yellow grid.

Defining an irregularly shaped area
After selecting an irregular shape (the icon shown next to it) , left-click on the first point where you want to start drawing. Then click on subsequent points where you want the line to be broken. The lines will be marked on the drawing with a dashed line. To finish drawing the shape, click anywhere on the picture with the right mouse button. The first and last points will be connected, and the resulting area will be filled with a yellow grid.

Editing the selected shape
To edit the shape of the active area, click on the icon shown on the right. Then select the Defined Areas area you want to edit from the list. You can also select an area directly in the preview window. The active area you have selected is marked in yellow, other defined areas are marked in white.

To move an area to another location, click the left button on the desired area and, while holding down, drag it to the desired location.

To change the dimensions of a rectangular or elliptical area, left-click on the attachment point (red square) in the upper left corner of the area and drag it.

The irregular area has attachment points at each end of the broken area. Each such point can be moved at will, thus changing the shape of the area.

The status bar of the editor window shows the dimensions of the area being drawn and the position of the mouse cursor relative to the upper left corner of the image. Dimensions are given when drawing, moving or resizing areas except for irregular areas.

Settings of selected areas

To edit an area, point to it in the Defined Areas list, or in the Defining Areas tab. The following options are available:

URL reference
Enter the URL to which you want the current area to lead.

Area Description (ALT) and Smoke (TITLE).
Specify the text that will appear when you hover the mouse over the current image area. In addition, this text will be displayed in the list of areas on the left side of the editor to facilitate its selection in the list.

Area without an assigned link
Check this switch if the area does not have a defined link.

Shortcut key
Specify a shortcut key to use to go to the address the current area points to.

Target window
Select the window in which to display the target from the list.

Additional event and attributes for this area
Click this button to open a window for defining additional attributes of the area tag and handling its events.

Style definition

This group allows you to specify the style for the tag. Here you will find three fields that allow you to specify:

Style definition
In this field you define the style for the element placed in the document. The button next to it launches the style editor tool to create a style definition in a user-friendly and convenient way. By clicking there you can also modify an existing style.

Class selection
In this field you specify the class identifier assigned to the tag. The drop-down list allows you to access classes defined in the current document and in external style sheets attached to it. The button next to it launches the tool for creating a new class.

Item ID
Here you provide a unique identifier for this element in the document. These identifiers can be used, for example, when making jumps to specific parts of the page or in scripts.

"Events and Attributes" button

The "Events and Attributes" button allows you to open the Events and Other Attributes window. This window allows you to specify additional attributes of the edited tag that do not have their counterparts in the tool window. There you can also specify events for scripting languages that allow you to achieve various special effects.