Page 43
8.3 Add Clickable Images and Image Rollovers
Adding clickable images and image rollovers requires both the Content and Layout
windows. The images are external files that first need to be added to your ShutterBug
project file. Clickable images are not your photo thumbnails and are completely
separate from your photo albums. Clicking on the image can navigate to another page
in your site, to an external website, or to an external file. An optional second image can
be specified so a 'roll over' effect can be created when the mouse hovers over the
image.
───────────────────────────────────────
Adding a Clickable Image
The image file must first be added to your Files list in the Content window. Adding the
image to your project files means it will get saved and uploaded to the web with your
site package. To add an image file to your site and then to the selected template,
follow these steps:
1. Click the Content tab to open the Content window. Select the "Files" heading
located at the bottom of the Navigation list. This will open the Files interface.
2. Locate the desired image file on your computer, and drag and drop it into the Files
window, as shown in the following picture:
3. Next, click on the Layout tab to open the Layout window. Select the page that you
want to add the clickable image to. Remember, if you want to keep the clickable
image unique to your current page only, add a template for the page you are
working on. Otherwise the Xtra image file(s) will be added to all pages that use
the same template.
4. Select the Xtras tab and Click the '+' symbol to add an Xtra box as shown in the
picture below. The box will appear in the xtra box list window as well as in the viewer
window (default position in the top left corner).
5. Double-click the "Xtra Box" text field to rename the box to a name you can identify
easily. Do you want the image to appear in your main thumbnail view only, in the
slideshow view only, or in both views? From the Xtra Box list, check the appropriate
check boxes to have the image appear in the desired views. By default, "Main Page"
will already be selected. Uncheck the check boxes to make the image invisible for one,
or both of the views.
6. Select External File from the pop up list. Then select Click Image as the external file
type, as shown in the picture below. Click the Easy button to open a panel listing the
image files that you've added to your site - these are the files that you added to the
Files interface (in the Content window), outlined above in Steps 1 and 2. Select the
desired image file from the list and hit the OK button. The selected image will be added
to your template.
7. Next you will need to make the image 'clickable' as shown in the picture below. The
Clicking image opens: option lets you specify the link to navigate to when the image is
clicked: to another page in your ShutterBug site, to another website, to an external file,
or to an email address. To make the image navigate to another website, simply enter
the URL into the text field provided. To make the image navigate to another page in
your site, to an external file, or to an email address, click the Easy button.
8. Select from the pop up list where you would like the image to navigate to when
someone clicks on it. Then select the desired page or file, or enter the email address.
Click OK to embed the link in the image and return to the main window.
9. Checking the Open in a New window check box will open the link in a new browser
window outside of your ShutterBug site. To have the link open in the same browser
window, just leave this check box blank. To add a rollover image to the clickable
image, follow the next set of steps outlined below.
───────────────────────────────────────
Adding a Rollover Image
A rollover image is an optional second image that will be displayed when the mouse
hovers over the first image. Adding the rollover image is done in much the same way
as adding the first image. You must first add the image to the Files interface in the
Content window. Follow steps 1-2 outlined above to add the desired image to your
Files list. Then go to the Layout window - there is no need to add another Xtra Box for
this second image as it appears in the same box as the first image.
1. Select the clickable image that you would like to add the rollover image to. The
Rollover Image option, shown in the picture below, lets you add the rollover image to
the clickable image xtra box.
2. Click the Easy button to open your list of image files. Select the desired image file
for the rollover image. Click OK to add the rollover image and return to the main
window.
3. You can web preview the images in Preview mode - However, Preview will only let
you see the rollover image when you click (and not hover) on the clickable image.
Once the page is uploaded, the rollover image will appear when the mouse hovers
over it. You can web preview the hover action, as well as the click action, by selecting
the Preview in Browser button to view it locally in an external browser.
───────────────────────────────────────
Clickable Image Xtra Properties
You can reposition and resize the Xtra box that contains the clickable and rollover
image, by grabbing it with your mouse from the viewer window and dragging it to the
desired position on the page. Use the grab handles to resize the box, or use the
Position and Size spin box controls to size the box to the same size as your images.
You can also add a colored border and/or margins to the xtra image box from within
the Borders interface.
───────────────────────────────────────
