You can set the properties for any image inserted in a web page on the Image Properties dialog box. This dialog box has three tabs, Image Info, Link, and Advanced.
The Image Info tab is used to set the URL to the image and configure how the image looks in the document. This tab contains the following fields.
URL: Sets the location of the image file. You can change the image displayed by clicking the Browse button to select a new source file or URL. All other image properties except size remain unchanged for the new image.
If the image you intend to use is located on an external server, you must use the full absolute path (for example, http://example.com/image1.jpg). If the image is located on the same server as your document, you can use a relative URL (for example, /images/image2.jpg).
Alternative Text: Enter a description of the image that can be read by an assistive device such as a screen reader. This provides accessibility for users with disabilities.
Note: When placing an image that is solely decorative, leave the Alternative Text field blank. This creates an empty alt-"" tag in the source HTML that is ignored by a screen reader.
Width: Enter the width of a new image and select the associated units (pixels or points). Also, used to edit the width of an existing image.
Height: Enter the height of a new image and select the associated units (pixels or points). Also, used to edit the height of an existing image.
Lock Ratio: Maintains the ratio between the height and width of the image to prevent distortion as you resize the image from the Image Properties dialog box. With this option is selected, you can type a new value in the Height or Width field, and the value of the other dimension is updated automatically when you tab or click off your entry. You turn off the Lock Ratio by clicking the icon to show the unlocked state.
Note: This option ONLY applies when you resize an image from the Image Properties dialog box; it does not affect changes made by dragging the image anchors directly on the web page.
Reset Size: Use this icon to abandon changes to image properties and reset the image back to the original size.
Border: Sets the width of a border around the image. For images that are not hyperlinks, the border is black. If an image with a border functions as a hyperlink, its border appears in the default hyperlink color. If an image without a border functions as a hyperlink, a 2-pixel colored border is automatically added to indicate the presence of the hyperlink, although you can also increase the width of this border, if desired.
Note: After adding a border to an image, you can change the border color using the Text Color icon on the Web Page Editor - Appearance toolbar. Furthermore, you can use the Text Color icon to change the border color for an applied image style that does not specify a border color.
HSpace: Sets the horizontal spacing (in pixels) between the image border, if present, or the image itself and other elements in the document.
VSpace: Sets the vertical spacing (in pixels) between the image border, if present, or the image itself and other elements in the document.
Alignment: Sets the horizontal alignment (Left or Right) of the image relative to the line containing it. Left places the image at the left margin and wraps subsequent text along the right side of the image. Similarly, Right places the image at the right margin and wraps subsequent text along the left side of the image. If the image is on a line by itself (that is, if text wrapping is not important), you can use the paragraph alignment controls instead to obtain the same effect.
Note: You cannot directly center an image in a web page, but centering the paragraph on which the image is inserted also centers the image. To center an image, insert the image on a blank line, click in the empty space just to the right of the image and use the Center alignment icon on the toolbar to center the image. You can only center an image if the Alignment option in Image Properties is set to <not set>.
Preview: Displays a view of what the image looks like with the selected properties.
The Link tab is used to create a clickable link from an image placed in a document. This link can point to many kinds of objects on the internet including a web address, PDF, or video. This tab contains the following fields.
URL: Use this field to browse to the destination the image links to.
If your image is located on the same server as your link destination, you can use a relative URL (for example, /images/image2.jpg). If the image is located on an external server to your link destination, you must use the full absolute path (for example, http://example.com/image1.jpg).
Target: Determines how the linked content displays in the window after the image is clicked. You can choose between New Window, Topmost Window, Same Window, or Parent Window.
Note: If you want to edit an image that is connected to a link, use the context menu and choose the Image Properties option. The Image Properties window lets you modify both the image and the link that it is pointing to. If you double click the image instead, you open the Link dialog box that allows you to edit the link properties and but not the image itself.
The Advanced tab is used to configure additional image options such as a longer image description, or tooltip text. This tab contains the following fields:
Long Description URL: Use to point to a URL(longdesc attribute) of a page containing a longer description of the image.
Advisory Title: This is the text of the tooltip (title attribute) that is shown when the mouse cursor hovers over the image. This text is not used by screen readers. To provide an accessible description, use the Alternative Text field on the Image Info tab.
Note: Items in parenthesis are CSS property names.
To edit image information properties:
Double-click the image to display the Image Properties dialog box.
You can also right-click the image and select Image Properties from the context menu.
Change the image properties as needed.
You can see the effects of your changes in the Preview without closing the dialog box and then make further changes to the image properties if needed. `
To edit image information properties: