Adding Images Walk-through

To add an image, first select the Images icon () in the toolbar.

For info on the ways to edit an image, click here.

The General Tab:

The general tab contains the most basic information about your image. In addition, a preview of the image selected in displayed at the bottom of the window.

Image URL: 

In this textbox you can type in the path to the desired file, or select the File Browser icon (for more information about the File Browser, click here). Upon selecting the image, the path is filled in for you.

Image Description:

This is a brief description of the image. This is essentially the <alt> tag in HTML.

Title:

Here you may enter a title for your image.

The Appearance Tab:

The appearance tab give you the ability to tweak how the image will be displayed. On the right-hand side of the window there is a preview of how the image will interact with the content around it.

Alignment:

This drop down menu sets how the image will be aligned on the page. the "left" and "right" options are the equivalent of "floating" an element left or right.

Dimensions:

By keeping the Constrain Proportions box checked, the height:width ratio will remain the same, but if you choose, you can uncheck this box and set what the dimensions will be.

Vertical Space:

Measured in pixels, the length of the margin on the left and the right of the image.

Horizontal Space:

Measured in pixels, the length of the margin on the top and the bottom of the image.

Border:

Measured in pixels, the width of the border around the image. The border will appear on the outside edge of any margins applied.

Style:

Here you any enter in any inline CSS, for example: "z-index: 5; position: relative; right: 25px;".

The Advanced Tab:

Swap Image:

Here you have the option of using Javascript to swap out the image you have initially on mouse over, and again on mouse out. On your page, you have your standard image. By setting the mouse over option, the standard image will be swapped out with the mouse over image when your cursor hovers over the image. Once the cursor is moved off of the image, the mouse out image is used. To specify what image to use for the two swap fields, select an image by clicking the File Browser icon (for more information about the File Browser, click here).

Miscellaneous:

The miscellaneous section provides some familiar properties like ID, Language Direction, and Language Code. Here you can also set the coordinates for an Image Map, and assign a Long Description (long description is usually a link to a text file that elaborates on the image more than an <alt> tag would).