Tools - Inserting graphics

The window is used to insert graphics into the document ( IMG tag in HTML).

The tool can be launched from the Main Menu / Tools / Graphics and Multimedia menu, as well as from the toolbars and using the standard keyboard shortcut Ctrl+Shift+I. The command icon is shown above.

The window contains two tabs:

Settings - here you can set any attributes of the IMG tag
Preview - allows you to preview the image as it will be inserted into the document.

Settings

Location
Enter the path to the image file. Use the drop-down list to select one of the most recently inserted addresses. You can also use the button next to the field to launch a graphic viewer that allows you to select an image.

Image description
Provide a description of the image, which will be used as the ALT attribute of the IMG tag. This will allow a user who cannot see the image to figure out what it represents (for example, in text-based browsers like Lynx).

Hint
Provide a description of the image, which will be used as the TITLE attribute of the IMG tag. A graphics browser (such as Internet Explorer, or Mozilla, Opera, etc.) will display this description as a 'balloon above the image'. Using the button next to this field, you can easily copy the text here from the Image Description field (above).

Dimensions
Enter the height and width of the image. If you have pointed to the image using the image viewer,the program will automatically insert the correct original dimensions stored in the image.

If the image is to be scaled relative to the size of the browser window, you can specify a percentage - to do so, check the ''%' switch.

If you have forced a change in image dimensions by entering different values in the fields, you can restore the original values by clicking on the button between the 'vertical' and 'horizontal' fields.

Spacing
Specify the spacing to be maintained between the image and the rest of the page elements.

Alignment
Choose how you want the image to be aligned with other elements of the page.

This setting has a deprecated status and it is not recommended to use it. It is recommended to use CSS styles.

Use map
If you have defined link maps in your document, you can choose which map to apply to the image.

By clicking on the button next to the field , you can launch the Link Map Editor and create a new link map for the image.

Border
Enter a number that specifies the thickness of the border ( border attribute). The default value is "0" (most commonly used).

This setting has a deprecated status and it is not recommended to use it. It is recommended to use CSS styles.

Checking the "Always insert" switch will cause the border attribute to be inserted into the IMG tag always, even when its value is 0.

If you enable the"Never insert" switch, the value of the border attribute will never be inserted. However, if you specify a border value different from 0, then with this option checked and at the same time with"Insert dimensions, borders, etc. as a style" enabled, its value will be inserted, but only as an inline style definition.

Apply the rollover effect

If you check the switch next to the section title, it will be possible to select the image to be replaced when you hover the mouse over the inserted image ( rollover).

Replace with
Use this field to specify the file to swap (identical to the Location field)

Element style

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.

Insert dimensions, borders, etc. as a style
If you check this switch, the image dimension, spacing and border parameters will be inserted as CSS style within the STYLE attribute instead of the corresponding HTML attributes.

Preview

On this tab you can see how the image will look in the browser (taking into account transparency, forced resizing, etc.).

"Events and Attributes" button