Portal
Language
 
Home>Knowledge Base>Root Folder>SiteBuilder>Images>632. Global Vision™ Sitebuilder - Working with Images: Editing Images
User Login
Username
Password
 
 Login
Information
Article ID44
Created On4/23/2009
Modified6/3/2009
Share With Others

632. Global Vision™ Sitebuilder - Working with Images: Editing Images

Editing Images

To edit image size, alignment, spacing, border, or alternate text:

  1. Right-click on the image.
  2. Choose Set Image Properties from the context menu.
  3. To draw image border, specify a desired border width in pixels in the Border width field. To set the color of the border, select a desired color from the Border color list.
  4. In the Alternate text field, enter an alternate text for the image.

    This text replaces the image when it cannot be rendered normally or if a user configured their browser not to display images. In some browsers (for example, in Internet Explorer) alternate text is displayed when the mouse hovers over the image.

  5. In the Long description field, enter an image description for visually impaired users. This text will be read by the Narrator tool integrated in Microsoft Windows.
  6. To align the image on the page, choose the appropriate option from the Align list.
  7. To set the width of white space to be inserted to the left and right of the image, specify a desired value in pixels in the Horizontal spacing field.
  8. To set the width of white space to be inserted above and below the image, specify a desired value in pixels in the Vertical spacing field.
  9. To resize the image, specify the desired image dimensions in the Width and Height fields.

    When resizing an image, you can choose whether to keep the proportions of the original image or change the image width and height separately. To do so, use the Keep proportions icon.

To crop an image:

  1. Right-click on the image and choose Crop Image from the context menu.
  2. In the crop window, with your mouse, drag the borders of the crop area where desired using the resize handles at the sides.

    To move the crop area use the move handle which appears when you hover the cursor over the crop area.

    When your are setting the crop area using the mouse cursor, you can see the size of the resulting image and the size of the cropped areas on the left of the window. You can adjust the sizes by specifying certain number of pixels in the corresponding fields:

    • To set the width of the area to be cropped from the left of the image, specify a desired number of pixels in the Left crop band size field. To crop from the right, specify a negative number.
    • To set the width of the area to be cropped from the left of the image, specify a desired number of pixels in the Top crop band size field. To crop from the bottom, specify a negative number.
    • To adjust the dimensions of the resulting image, specify the desired width and height in the Output image width and Output image height fields.
  3. If you wish to keep the original image proportions after cropping, select the Lock aspect ratio check box.
  4. Click OK.

Sitebuilder also allows you to create image maps, that is to create areas within an image and link them to some destinations.

To create an image map:

  1. Right-click on the image and choose Image Map Editor from the context menu.
  2. To create an area, select its shape (rectangle or circle) and click Create Area.

    Or simply select an area with the mouse cursor.

  3. To resize the area, pull it by the small red square.

    Or enter the desired area dimensions in the Width and Height fields.

  4. To move the area, use the cursor or specify the desired top and left indents in the Top indent and Left indent fields.
  5. To link the area to some destination, specify a desired URL in the Link the area to field.
  6. To specify how the link will open (in the same browser window, in the new window, and so on), select a desired option from the Open the link in list.
  7. In the Comment field, specify a text that will be displayed when a user hovers the cursor over the area (not supported by some browsers).
  8. To remove an unwanted area, select it and click Remove Area. To remove all the created areas, click Remove All.
  9. Click OK.