In this tutorial, my project will
be to create a map with mouse over buttons listing available
rental apartments. There will be a main map of a metropolitan
area with a number of rollover buttons. When you do a mouse over
detailed information will appear about the available property
on the right hand column.
Step 1
I started with a map I digitized with my scanner and saved as 'city_map.jpg.'
I then added space to the right of the image using the - Modify - Canvas
Size... - in Fireworks.
 |
|
city_map.jpg
|
Step 2
I then created several pseudo properties - apartments with some fake info.
I gathered photos from an apartments for rent Web site. I saved these files
as .jpg files. I also created two circle buttons, one blue and one red. These
were saved as transparent .gifs.
Step 3
With my images created I could start creating the advanced rollover effects.
City_map.jpg would be the base image for this project. Double click this
layer and make sure - Share Across Frames - is checked. You will always want
to see this map.
Step 4
My next step was to create a 'button symbol.' A symbol is something that can
be used again and again. When visitors place their mouse over these buttons
the apartment info would appear in the white canvas on the right.
Go - Insert - New Button. Give it
a name - i.e. Apartment Button. Right click anywhere in the window
and select - Import. Select the red button .gif image and center
it. Use you arrow keys to position it. Now click the 'Over Tab'
and import the blue button. Make sure the 'onion skinning' button
is checked. This allows you to see every image state. Now use
your arrow keys to center the blue button over the red. Finally
click the 'Down Tab' and click 'Copy Over Graphic.' This copies
the blue button again. Now close the window. You should see your
button in your 'Library' palette.
 |
|
Button Symbol
|
(1) (2)
