Using Images

In this section:

How to:

Reference:

WebFOCUS Maintain makes it easy for you to add .jpg or .gif images to your forms. You can add images in one of two ways:

Images are included in your project as resources. Resources are part of your project, but you do not edit them directly using the Maintain Development Environment. However, WebFOCUS Maintain will take care of deploying them to the correct location so that your application will run properly.


Top of page

x
Procedure: How to Add an Image to Your Form
  1. If you want to insert the image using the Image control, select the Image control Image control in the Controls palette and select an area on the form approximately where you want the image to go.

    or

    If you want to insert the image as a background image, display the properties for the form in the property sheet and double-click the BackgroundImage property.

  2. In the Image Source dialog box, determine whether you want to directly enter the name of your image (From the resource selected here), or use a variable (From a variable).
  3. If you choose to select an image resource here, select an image from the list of available images in your project.

    If the image you want is not part of your project, click New to use the Resource Wizard. See How to Add an Image to Your Project as a Resource for more information.

    or

    If you choose to use a variable, select a variable or data source stack column from the list of available variables. The variable or data source stack column must contain a path to an image file. If the path contains backslashes, use double backslashes (for example, C:\\ibi_img\\graphic.gif).

    If you want to create a variable, click New variable or New data source stack. For more information, see How to Create a Variable in a Procedure and How to Create a Data Source Stack Explicitly Using the Stack Editor.

  4. For background images only, select a tiling style. When you tile your image, WebFOCUS Maintain places multiple copies of it next to each other on the form.
  5. Click OK.
  6. Images only. Optional, but recommended. Giving your image a more meaningful name than Imagen is optional, but recommended.
  7. (Images only.) If necessary, readjust the size and placement of your image.
  8. If you used a variable to insert the image, open the variable definition in the Procedure Editor, and enter the path to the image file.

Top of page

x
Procedure: How to Add an Image to Your Project as a Resource
  1. In the Image Source dialog box, select the From the resource selected here radio button and click New.

    WebFOCUS Maintain opens the Resource Wizard, a series of windows that guide you through adding an image to your project.

  2. Enter the path to the image. If you want to see what the image looks like, click Preview.

    If you prefer to browse for the image, click the ellipsis button ellipsis button. The Resource Wizard will automatically preview the image you select.

    Then click Next.

  3. Specify a unique name for your image. Then click Finish.
  4. You may see a dialog box informing you that WebFOCUS Maintain needs to make a copy of the image in the project directory. Click OK.

Top of page

x
Reference: Image Source Dialog Box

Use the Image Source dialog box, shown in the following image, to insert images into your forms, either using the Image control, or as the BackgroundImage property for your form.

Image Source dialog box

Insert image

Select From the resource selected here to select an image directly. When you select this option, you will see a list of available images and a New button that enables you to add new images.

Select From a variable to set an image to be the value of a variable. This enables you to determine at run time what image should appear. When you select this option, you will see a list of available variables in your procedure.

List of available images

If you select From the resource selected here, you will see this list of available images. Initially, <None> is selected. Select the image you want to display. Click New to add images to the list.

New

Opens the Resource Wizard so that you can add new images to your project.

Tiling style

(For background images on forms only.) Determines whether repeated copies of the image appear on the form. If you wish to use a background image that repeats (for example, a pattern of dots), you can make your form download and run faster by using multiple copies of a smaller image.

You have four choices for tiling:

New variable

This is available only if you select From a variable. This option opens the New Variable dialog box, where you can create a variable.

New data source stack

This is available only if you select From a variable. This option opens the Stack Editor, where you can create a stack.

List of data source stacks and variables in your procedure

This is available only if you select From a variable. This option contains a list of the existing stacks and variables in your procedure, as shown in the following image.

Either select a variable, or expand a data source stack and select a column.

Image Source dialog box

Data sources - Current Area

This is available only if you select From a variable. This option lists the fields from the data sources used in this procedure.

Note: We recommend that you do not use the Current Area. Data source stacks are a superior way of accessing and manipulating data source values, and they function more intuitively than the Current Area.


Top of page

x
Tips for Using Images in Your Applications

Top of page

x
Changing Image Properties

When you select your image, you will see a list of image properties in the property sheet. Changing these properties will change what your image looks like and what it does at run time.

Many of the styling properties can also be changed using a Cascading Style Sheet. For more information on Cascading Style Sheets, see Using Cascading Style Sheets.

Choose your property based on the task you wish to perform:

If you want to change the name of the image that identifies it to the procedure, use the (Name) Property. For more information, see the (Name) Property.

If you want to change which image will appear, use the Image Property to open the Image Source Dialog Box.

If you want to change the size of the location or size of the image, use a style sheet or resize the image directly in the form. You can also use the Stretched Property and the Bottom Property, Left Property, Right Property, and Top Property.

If you want to add a border to the image, use a style sheet or the Border Property to determine whether you have a border and what type of border it is. The BorderColor Property allows you to determine the color of the border. The BorderWidth Property allows you to determine the width of the border.

If you want to change what the image looks like when the end user selects the image, use the ImageDown Property. For more information, see Changing Images at Run Time Using ImageDown and ImageOver.

If you want to make different regions of the image clickable, use the Map Property. For more information, see Using Image Maps.

If you want to make the image inactive or make it invisible, use the Enabled Property to determine whether the image is active or not. If the image is inactive, nothing will happen when the end user clicks it. You can also use the Visible Property to determine whether the image is visible to the end user or use a style sheet. For more information, see the Enabled Property and the Visible Property.

If you want to change what the cursor looks like when it is on top of the image, use the CursorPointer Property or use a style sheet.

If you want to change what the image looks like when the cursor is on top of the image, use the ImageOver property. For more information, see Changing Images at Run Time Using ImageDown and ImageOver.

If you want to display a tooltip when the cursor is on top of the image, use the Alt Property or the ToolTipText Property.

If you want to display a tooltip when the cursor is on the top of the image, use the ToolTipText Property.

If you want to assign a Help topic to the image, use the Help Property. For more information, see Assigning Help to Your Forms and Controls.

If you want to move the image to another layer, use the Layer Property. For more information, see Layering Controls.

If you want to control the display order of the image when more than one control is overlaid, use the ZIndex Property. For more information, see the ZIndex Property.


Top of page

x
Using Image Maps

How to:

Reference:

Using the Map property, you can define separate clickable areas on an image. At run time, end users can click on separate areas of the image to trigger different actions. This enables you to use one image instead of several, thus making your application smaller and faster to download.

After you define an image map, when you open the Event Handler editor for the image, you will see new events that correspond to each of the areas in the image map.



x
Procedure: How to Define an Image Map
  1. Select the image control you want to apply an image map to and select the Map property.

    WebFOCUS Maintain opens the Image Map dialog box.

  2. Click New to create an image map.
  3. Define clickable areas in the image using one of the three tools. You can define areas shaped like a circle, rectangle, or polygon.

    To delete an area, use the Delete and Delete all buttons.

    Delete button Delete all button

  4. If you wish, rename your areas and apply tooltips to each.
  5. Click OK.
  6. Open the Event Handler editor for the image.
  7. In the list of events for the image, you will see Click events for each of the areas you defined in the Image Map dialog box.
  8. Define event handlers for each of these events.


x
Reference: Image Map Dialog Box

Use the Image Map dialog box, shown in the following image, to define clickable locations in an image.

Image Map dialog box

This dialog box includes the following options:

Available maps

Contains a list of the maps available for this image resource (you can have more than one). To use one, select it. To rename one, select it and type a new name.

New

Creates a new image map.

Image map area

Create and edits your image areas that define what end users can click.

cursor button

Enables you to select areas for editing.

circle button

Enables you to define circle-shaped areas on the image.

rectangle buttom

Enables you to define rectangle-shaped areas on the image.

polygon button

Enables you to define irregular, polygon-shaped areas on the image.

Delete button

Deletes a selected area.

Delete all button

Deletes all areas defined in this image map.

Description of selected area

Describes what shape and size the selected area has.

Area name

Is the name of the selected area. To rename an area, select it and type a new name here.

Tooltip

Enables you to enter a tooltip for the selected area.


Top of page

x
Changing Images at Run Time Using ImageDown and ImageOver

How to:

If you are defining your image to be clickable that is, an end user clicking the image causes some action to occur, then you may wish to provide visual feedback to your end users that the image has been clicked. You may also want to have the image change when end users move their cursors over the image, indicating that the image is clickable. You can do this using the ImageDown and ImageOver properties.

To use another image as an ImageDown or ImageOver, we recommend the following:



x
Procedure: How to Change an Image When End Users Click It
  1. Select the image.
  2. Double-click the ImageDown or ImageOver property to open the Image Source dialog box.

    or

    Right-click the image and in the shortcut menu, click Change down image or Change over image.

  3. Follow steps 2 through 6, as shown in How to Add an Image to Your Form.

WebFOCUS