Advanced Rollovers
in Fireworks 3.0
Home > Build
> Software > Fireworks
(1)
(2)
by Don Herion
Step
5
Create a new layer and label it - Buttons. Double click the layer and
make sure - Share Across Frames - is checked. Now drag and position 3 buttons
anywhere on the map. Doing this automatically slices up the image. If you move
the buttons the slicing will change. Finally create a final slice (using the slice
tool) encompassing the white area on the right.
 |
| Image sliced with buttons and space for 'apartment info.' |
Step 6
Now that
your buttons are positioned and set you need to add the fake apartment images
to the mix. Create new layers for each one and name them appropriately. Now click
the 'Frames Tab' and add a frame for each apartment image you plan on adding.
 |  |
| Create a layer for each apartment |
Create 4 frames |
Step 7
Now
you want to convert your 'apartment info' images into 'graphic symbols.' In the
Library palette click the small arrow button (next to the ? symbol) at the right
top and select - New Symbol... Select 'Graphic' and give your symbol a name -
i.e. Macromedia Apt. Click OK. Now right click in the new window and import the
correct image. In my case - macromedia_apt.jpg Close the window. Repeat this procedure
for the other two images.
Step 8
Select the 'Macromedia
Apt' layer. Then go the 'Frames' palette and select 'Frame 2.' Now drag the 'Macromedia
Apt' symbol from the 'Library' palette and position it over the white area on
the right. Use the arrow keys to position it.
Step 9
Now all you have to do is add a 'behavior' to the specific button on the map.
First select the 'Buttons' layer. Then click the 'Behaviors Tab.' Now the button
symbol already has a rollover effect, it changes from red to blue when you do
a mouse over. Now we want to add another behavior so when you do a mouse over
an apartment image appears. Click the 'Plus' button and select - Swap Image.
 |
| Add Behaviors to buttons |
This
brings up your 'Swap Image' window. Select the large slice to the right. This
is where your 'apartment info' images resides in their various frames. Make sure
'Frame 2' is chosen. Click OK.
 |
| Swap Image window |
Now repeat
this procedure for the other button/images. The next apartment image will use
Frame 3, etc.
Step 10
With the job done you can
now preview it by clicking the 'Preview' Tab.
Step 11
You should now Export the file so it can be imported into Dreamweaver. Click -
Export - and make certain to select - 'Use Slice Objects.' Save this to your 'maps'
or 'image' folder. I named my file - apartments.
Step 12
Now Start Dreamweaver and open - apartments.htm. Click F12 and preview it in your
browser. This is not as intuitive as creating simple rollover effects as in Dreamweaver
but it does have greater flexibility.
Click here to see the
final result - apartments.htm
