Image Objects

Use image objects to add photos and other picture files to your web site. SiteSpinner™ has numerous on-board image-editing tools, so you will seldom find the need to open a separate photo editing application.

Besides the basic commands for adding an object, you may also add an image object to a page by pasting an image that you have cut or copied from another application. Or, you can click to select an image file in Windows® Explorer®, and then drag it onto the page in the Work Window.

Once you have added a picture to a page, you can resize it smoothly while maintaining its proportions. Click to select the image object, press the CTRL key, and then click and drag one of the corner control points to resize the image. You can also transform it using skewing or rotation operations. (For more information, see Transform Object.)

You can use the Shading Editor to increase the brightness of an image, improve its contrast, or add a tint. You can also choose a color to be mapped transparent – that is, whatever is behind the image (another image or the page background) will show through in places where the color you select would otherwise appear. You can create use a ghostly transparency effect to “fade” images to allow objects or the page background to partially show through. Enhancements are applied to a re-rendered version of the original image and will not affect the original image file. For more information, see Shading Editor Dialog Box.

When you add an image, it is placed on the page in its original image format. However, if you change the image in any way, such as scaling it or adding transparency, SiteSpinner™ will create a copy of (or “re-render”) the image, so as not to overwrite your original image. (Re-rendering can be disabled in some cases.) For more information, see Rendering and Re-Rendering.

Fading an Image

Use the following procedure to fade an image object, so that objects behind it or the page background can be seen through it.

1. Select the image object you want to fade.
2. Press the ALT+Q keyboard shortcut

   OR

   Click the Quick Properties Editor button: in the Components Bar

   OR

   Select Object>Quick Properties Editor.

   The Quick Properties Editor dialog box will open.

3. Click the Shading Tab.
4. Click and drag the Trans. slider to the right to increase the amount of transparency. A preview of the image with the transparency effect applied to it will appear in the Thumbnail View and in the object itself in the Work Window. The transparency effect will be applied to the selected image object.

Creating a Thumbnails and Pop-up Gallery

1. With the page to which you want to add thumbnail and pop-up gallery open in the Work Window, add an image. For more information, see New Objects.
2. Resize the image object smaller while maintaining its aspect ratio by clicking to select it, pressing the CTRL key, and clicking and dragging a corner control point inward.
3. Right-click the image object, and then select Popup Fullsized Image.
4. Press the F7 keyboard shortcut to preview the page.

   When you click the resized (smaller) image, the full-sized version will open in a pop-up window.

5. Repeat steps 1 through 3 to build your thumbnail and pop-up gallery.

You may also click to checkmark the Popup Fullsized Image option box on the Link tab on either the Object Editor or Quick Properties Editor dialog boxes to set the link between the resized image and its full-sized version.