Rollover Effects

This is my method and I don’t claim it’s the best or most effective method… but its simple to follow (I hope!) and it works.

Part A – Creating the behaviours

1/ Create a new file in Fireworks using FILE>NEW







 

 

2/ Create a new canvas as below:


  

3/ With the canvas now drawn on the screen we can produce our first button as follows: Choose EDIT>INSERT>NEW BUTTON…..


  

4/ The button dialogue will appear and you will need to add some text for the button as
shown below. Notice that the button tab at the top is set to UP


 
5/ Switch to the OVER tab and click COPY UP IMAGE
  

  

6/ With the text selected add a text effect from the Properties dialogue box and change the text color and add a Glow

 

 


  




 

  

7/ Click DONE (3) when happy with the down button effect. You will now see your button pasted onto the original canvas you created

Notice the red slice lines around the button
  

8/ Lets now create a second button as follows - Choose EDIT>DUPLICATE from the top menu.
  

 

 

 

 


A copy of the 1st button is pasted over the original
  

9/ We can now change the text displayed on the button by editing the TEXT field in the PROPERTIES INSPECTOR







You can also resize your buttons if required from the same panel
  

10/ Drag the new button below the first and position directly underneath (adjust the size again if required). Move both buttons over to the top left of the canvas



 

 

 

 


  

11/ Lets now test the effect using F12 or the menu FILE>Preview in browser option

You should see the above when the cursor is passed over the text
  
12/ Now we need to create a new “Slice” for our rollover “disjointed” text to appear in.
From the TOOLS menu down the left hand side – select the SLICE TOOL

13/ Draw a rectangular slice somewhere in the middle of the canvas as shown:


  

14/ We now need to create some Frames to hold our text – From the WINDOW menu make sure that the FRAMES panel is selected and visible on the right side of the screen.

  

15/ Using the ADD icon in the lower right of the frames panel – create 2 more frames


  

16/ Now click on the Home buttons white circular button and drag into the centre slice we created – a thin blue line will join the two slices and a dialogue box will appear as below:
  

  

 

 

 

 

- Accept the default of Frame 2
- Do the same for the “News” button except this time choose Frame 3 from the Swap Image dialogue box

With all the slice elements created and the connections between buttons and frames established its time to populate the
frames with some text or images
 

17/ Select Frame 2 from the frames panel and create some text inside the center slice.




   

18/ Use the Preview in browser again to see the effect – i.e. Passing the mouse over “Home” should cause the button to change state and also pop-up your newly created disjointed text - moving away it should revert.
19/ For the second button we are going to add a picture for its disjointed behavior:

  
20/ Open any existing picture you have handy and adjust its size to something reasonable using the MODIFY>CANVAS>IMAGE SIZE menu items (something around 175x125 should do)


   

21/ Now select frame 3 in our original canvas – this is the frame that is going to hold our image within the slice and that is attached to the “News” button we did in step 16


  

Highlight the image you just resized and drag it from its current canvas over to the center slice of our project


  

Time to test once again (F12)


  

SAVE your file.

 

Adding your newly created work into Dreamweaver

 

We are still in Fireworks at this point.....

 

1/ Notice the FW symbol in the top right corner of the image. – click it



and choose DREAMWEAVER>EXPORT HTML

 

 

 

 

 

 

2/ Select the settings as shown above (making the necessary adjustments in the file location to match your site definition)... you can leave the filename as untitled-1.htm or call it something you will remember.

Note: Putting images in a separate folder will keep your site nice and tidy - there are a LARGE number of files generate by Fireworks

 

3/ Open Dreamweaver and create a new page (html or ASP)

Save the new document as TEST.ASP or whatever, and then position the cursor where you want the Disjointed file to be positioned


  

4/ From the INSERT menu choose >INTERACTIVE IMAGES>FIREWORKS HTML

In the above dialogue box browse to the HTML/ASP that you just created with Fireworks (step 2) and OK

 
 

5/ You should now see the Fireworks file integrated into the TEST.ASP page. SAVE your work.

Note: I have added a border to the table that was inserted for your benefit - it is not produced by default
 

That’s it!!!

You should now be able to test your newly created page by uploading it to your server/previewing it etc.

What we didn't do during this tutorial is add hyperlinks to these buttons – this is fairly straightforward and can be done directly in fireworks with the button selected or later in Dreamweaver using the Design>Behaviors panel (you will see some of the swap image behaviors that the fireworks file created already present)
 

In Conclusion
It’s possible to go much further using this technique – you could for instance use more button states than the UP and OVER that we used. It is also very easy to swap more than 1 image at a time (i.e. Two different images appear in two different locations when the mouse passes over a menu item) by creating another slice and linking it to the same button (a button can have any number of slices associated with it) with more frames to hold the pictures/text - see below