In this section:
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.
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.
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.
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.
WebFOCUS Maintain opens the Resource Wizard, a series of windows that guide you through adding an image to your project.
If you prefer to browse for the image, click the ellipsis button . The Resource Wizard will automatically preview the image you select.
Then click Next.
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.
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.
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.
Opens the Resource Wizard so that you can add new images to your project.
(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:
This is available only if you select From a variable. This option opens the New Variable dialog box, where you can create a variable.
This is available only if you select From a variable. This option opens the Stack Editor, where you can create a stack.
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.
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.
Browsers download HTML/DHTML first and then images. In Internet Explorer, the status bar will say "N files remaining to download." This is because the browser has the HTML already, but it is retrieving the images. Instead of downloading several images, consider using one larger composite image and defining an image map. For more information, see 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 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.
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.
WebFOCUS Maintain opens the Image Map dialog box.
To delete an area, use the Delete and Delete all buttons.
Use the Image Map dialog box, shown in the following image, to define clickable locations in an image.
This dialog box includes the following options:
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.
Creates a new image map.
Create and edits your image areas that define what end users can click.
Enables you to select areas for editing.
Enables you to define circle-shaped areas on the image.
Enables you to define rectangle-shaped areas on the image.
Enables you to define irregular, polygon-shaped areas on the image.
Deletes a selected area.
Deletes all areas defined in this image map.
Describes what shape and size the selected area has.
Is the name of the selected area. To rename an area, select it and type a new name here.
Enables you to enter a tooltip for the selected area.
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:
Right-click the image and in the shortcut menu, click Change down image or Change over image.