Summary and Prerequisites: In this tutorial you will learn how to use BlueLava Studio to create an image rollover for use in both Image and Site Navigation Elements. This tutorial assumes basic knowledge of how to use images and graphics on the web as well as a basic understanding of BlueLava Studio.
Preparation Work: Before beginning the tutorial, you should use a graphics editing program to create two different images, one being a normal (off) state and one being a highlighted (on) state. It is helpful to save these images with similar filenames for easy organization (for example: image1_off.gif and image1_on.gif).
To create a rollover from an Image Element:
Step 1: Login to BlueLava Studio and go to your Image Library where you will upload the two images and save them into an appropriate Image Group (skip this step if you’ve already uploaded the images).
Step 2: Navigate to the area of your site where you would like to create the rollover image.
Step 3: Select Add an Element from the Available Tasks area; Choose Image from the Element List; Select Create and install a new Element from the installation screen; name the new element and click Install.
Step 4: In step 1 of the Add Image screen, use the Image Picker to select the normal (off) state image from the images you just uploaded.
Step 5: Click Enter Advanced Image Properties (step 4) and select Yes to use a rollover image.
Step 6: Use the Image Picker to select the highlighted (on) state image from the images you just uploaded.
Step 7: Enter any other desired image properties and click the Finish button.
Clicking the Preview button will now open the active site page where you can view your newly created rollover image.
To create a rollover from a Site Navigation Element:
Step 1: Login to BlueLava Studio and go to your Image Library where you will upload the two images and save them into an appropriate Image Group (skip this step if you’ve already uploaded the images).
Step 2: Navigate to the area of your site where you would like to create the rollover navigation button.
Step 3: Select Add an Element from the Available Tasks area; Choose Site Navigation from the Element List; Select Create and install a new Element from the installation screen; name the new element and click Install.
Step 4: Choose a navigation orientation on step 1 of the Add Navigation screen.
Step 5: Choose a navigation alignment in step 2 of the Add Navigation screen.
Step 6: Select Use Image from step 1 of the Add Link screen.
Step 7: Choose a site page to link to in step 2a of the Add Link screen.
Step 8: In step 2b of the Add Link screen, use the image picker to select the normal (off) state image.
Step 9: In step 3b under Rollover Image Source, use the image picker to select the highlighted (on) state image.
Step 10: Enter any other desired image properties and click the Add Link button.
Clicking the Preview button will now open the active site page where you can view your newly created rollover navigation.
