Document Sample
Rollovers Powered By Docstoc
					Multiple Rollovers with Fireworks

Step 1

Create the following layers.

structure - The common elements for the page are put in this layer.
links - This layer consists of the links. In this tutorial the rollover buttons i.e. image 1, image 2 and image 3 are placed in
this layer. (position it exactly the way you want it.)
rollovers - This is a duplicate copy of the links layer with the button and text color changed for the rollover effect.
swap - The first swap image is placed in this layer. (position it in the exact place)

Step 2

Goto the Frames window, you can see a single frame named 'Frame 1'. Select this and drag the mouse to 'Duplicate Frame
'    at the bottom of the panel. A duplicated 'Frame 2' is created.

Step 3

Select 'Frame 2', you'll notice that it has the similar contents of frame1. Make sure you have selected the swap layer and
you are in frame 2, now you have to delete only the image and paste in the second image. Position it in the same place as
the previous image, do not drag and position the image as it might not be the exact position, instead, give the same x and
y position (in the properties window) of the first image.

Step 4

Repeat Step 3. (Duplicate the frames and insert the images) Finally there has to be
4 frames. In this tutorial 4 swap images were used, a default image will be
displayed when the browser opens and when you rollover the three links, three
different swap images will be displayed.

Step 5

Now for the rollover effect. Select 'Frame 1', goto layers panel, close the eye for
'rollover' layer and the links layer should have the eye open. Next select ' Frame 2',
goto layers panel, close the eye for 'links' layer and the rollover layer should have
the eye open.

Step 6

The next step is to slice up the images as seen in the image below. Slice the images and name it appropriately for easy
Step 7

Right click on the first rollover slice (Image 1), from the popup menu select 'Add Simple Rollover Behavior' as in the image
below. Repeat this step for the next two rollovers buttons. Now we've finished with the rollovers.

Step 8

The next step is to link the swap images. Go back to the first rollover slice, click on it, you will see a small circle in the
center of the slice (see in the image below), move the mouse pointer over it and you will notice a hand icon, click on it, the
icon changes to a folded fist and a blue line appears (as seen in the image below, circled in red), drag this line to the swap
image slice. What you're doing now is, linking the rollover to the swap image. The Swap Image window opens as seen in
the image below, select the frame which has the image you want to link to and click on OK. Repeat these steps for the
next two rollovers. In this tutorial, the rollover 'Image 1' is linked to Frame 2, 'Image 2' -> Frame 3 and 'Image 3' -> Frame

Step 9

Now, in the layers panel remove the eye in the web layer and preview the file.

Step 10

The last step is to export the entire file. Fireworks will automatically convert the swaps to javascript and html. You don't have do any
programming, its automatically done for you when you export the file Ok, when you export the file see that you give settings as in the
screen shot below.
Fireworks will export a .htm file to the directory you have specified (along with the images). Browse the .htm file from IE or Netscape
and you'll see your swap images working beautifully.

Shared By: