How to work with the Image Object

Best Practices > Step 4 - Pages >

How to work with the Image Object

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

Double-click on an Image Object that you have inserted in the page layout table or select it and click on the button to open the Image Object window.  Here, you can indicate which file you want to import, define its properties, set close-up and wide-angle effects, add it to the SiteMap and, in this case, add the necessary information for it.

Click to expand/collapseHow to edit an image

WebSite X5 lets you import all the main graphic formats available and automatically optimizes the images, resizing them to fit in the cells of the page layout table and saving a compressed copy of them (according to the Quality factor given  in Image Object | Display).

WebSite X5 also provides a versatile built-in editor for editing your pictures:

Click on the Edit... button.
Use the various options in the Image Editor to cut, rotate and edit the image, applying filters, frames, etc.
If necessary, you can make a copy of the original picture, using the Save As... command.
Click to expand/collapseHow to create a wide-angle picture

Wide-angle photographs are very attractive but there isn't always enough space on a website page to show them to their best.

A simple answer is to insert them in a smaller window and let visitors move the picture to view the hidden parts.

Prepare a wide-angle photo that develops on a horizontal plane, so it is wider than it is high.
Insert an Image Object and import your wide-angle photo.
In Image Object | Display, set the Display Mode to Manually enlarge and move the Image or Automatically enlarge and move the Image and then select the Horizontal Panoramic View as Movement Mode.
Enter the actual Height of the photo.
You can also use the Show the navigator option to give visitors an interactive preview of the full picture.

You can insert wide-angle photos that develop on a vertical plane in the same way.

Click to expand/collapseHow to create a button with a mouseover effect

A pleasant and useful effect is the mouseover effect that you can apply to buttons. With WebSite X5, you can apply various types of mouseover effects on the images given to buttons, and customize them. The most common effects that are applied to buttons are those for when the button is "pressed" or "released".

Prepare two pictures to represent the button when it is "pressed" and when it is "released".
Insert an Image Object and import the file containing the image for the "released" state.
In Image Object | Display set the "Superimposed image" option as Mouse Over Effects and import the file containing the image for the "pressed" state. The two images should have the same size, so it won't be necessary to align them.
Complete the button by setting up the link: go back to Image Object | General and click on to open the Link window and select the appropriate action.

You can use other mouseover effect to highlight a picture, show up captions, or for buttons that indicate a function that can be used, such as a magnifying glass to enlarge something or a Play button to start music or a video.

Click to expand/collapseHow to protect pictures from unauthorized copying

It is quite simple to download a picture from the Internet. WebSite X5 offers you two ways of preventing unauthorized copies of your pictures from being made:

1. Disable the commands in the browser's context menu:
Select the picture and go to the Image Object | Display window.
Select the Protect Image against copy option.
2. Apply a watermark to the picture:
Select the picture and go to the Image Object | General window, then click on the Edit... button to open the Image Editor.
Open the Watermark section and select the picture you want to apply a watermark to from the list.