HTML Editor: Image Properties

When you add or edit an image, you can choose a variety of settings related to that image in the Image Properties dialog box. This dialog appears:

1. When you click the Insert/Edit button; or

2. When you right-click an image and then choose Image Properties.

The Image Info Tab

To specify an image to add to your message

In the URL box, type or paste a URL that points to the image you want.

-or-

To use an image already saved in the Image Browser, click Browse Server.

To add alternative text to the image

This text appears if there is an error and the image cannot load. It is also helpful to users with text-only browsers.

In the Alternative Text box, type the description you want.

To change the width or height of the image

1. Lock or unlock the sizes.

Locked : When you change one size, the other changes in the same proportion.

Unlocked : Each size can be changed independently.

2. Change the settings in the Width and Height boxes.

You can reset the size to the original settings by clicking the Reset Size button:

To add a black border to the image

Type a number in the Border box. The higher the number, the thicker the border.

To add space on both the right and left sides of the image

Type a number in the HSpace box.

To add space on both the top and bottom of the image

Type a number in the VSpace box.

To align the image with surrounding text

Click the Align box, and then choose one of the following:

Left: Aligns image on the left side of the page.

Abs Bottom: Aligns the bottom of the image with the bottom of the text surrounding it, including any dangling portions as in the letters "j" and "y " **

Abs Middle: Aligns the middle of the image with the middle of the text surrounding it. **

Baseline: Aligns the bottom of the image with the bottom of the text. **

Bottom: In most browsers, this operates the same way as Baseline. **

Middle: Aligns the middle or bottom of text (depending on the browser) with the middle of the image.

Right: Aligns the image on the right side of the page.

Text Top: Aligns the top of the actual tallest text, or the tallest possible text (depending on the browser), with the top of the image. **

Top: Aligns the top of the image with the top of text. **

** For these items, text does not wrap.

The Link Tab

To make the image a hotlink to another web address

- In the URL box, type the URL for the web page to go to when the image is clicked

-or-

- Click Browse Server, and then navigate to the destination page you want.

To control where the new document displays when the user clicks the image

- Click the Target box, and then choose one of the following:

New Window (_blank): Loads the new document into a new window.

Topmost Window (_top): Loads the new document into the entire window.

Same Window (_self): Loads the new document into the same window or frame.

Parent Window (_parent): Loads the new document into the parent frame of the frame containing the image.

The Advanced Tab

You can apply styles to all elements with a given ID.

Language Direction

Indicates the direction of your chosen language: choose Left to Right (LTR) or Right to Left (RTL).

Language code

Specifies the language of element content and attribute values.

Long Description URL

If the image is too complex to describe with simple alt text, you can enter a URL which links to page with a longer description. You must create a the page with the description.

Stylesheet Classes

You can apply styles or style classes to an image. However, there is no way to attach an external style sheet to your message; you must enter the style rules in the Source Code view. Here's an example:

1. Click the Source button in the toolbar to enter Source Code view.

2. After the </title> tag and before the </head> tag, add the following to create a style class:

.make_border {

border-top-style: double;

border-right-style: double;

border-bottom-style: double;

border-left-style: double;

border-top-color: #316D9D;

border-right-color: #316D9D;

border-bottom-color: #316D9D;

border-left-color: #316D9D;

}

</style>

3. Click the Source button to return to the WYSIWYG view.

4. Click the Insert Image button and then add an image. For this example, you can type the following in the URL box of the Image Properties dialog:

http://www.lyris.com/images/logo.gif

5. Right-click the image, choose Image Properties, and then click the Advanced tag.

6. In the Stylesheet Classes box, type make_border.

7. Click OK.

The border may not appear immediately. If it doesn't, click the Sourcebutton twice.

Advisory Title

This attribute can be useful in several ways: improving accessibility for the visually impaired, search engine optimization, or creating tooltips.

Style

You can apply one or more style rules to the image. To do so, enter a rule without curly brackets or a selector. To separate two or more rules, type a semicolon between each rule. Example:

Note Make sure the path for your images is the absolute path (the complete URL), not the relative path.

Wrong: /img/product.jpg

Right: http://example.com/img/product.jpg