5 Replies Latest reply on Dec 12, 2007 1:00 PM by JoeDaSilva

    Rollovers (Frames)

      Hi, I've been using this useful guide to help me (a web design noob) make a FW rollover:

      Rollover Buttons in Fireworks

      In Fireworks you have to use the Behavior palette to create rollover buttons.

      1. Again the first step is to design your images and rollovers in Fireworks. Make sure your rollovers are in the exact same place as your rollovers. Put your images in one layer and your rollovers in another.
      2. Now you need 2 frames. Frame 1 should have the actual images and frame 2 should have the rollover images.
      3. Insert slices on each of the images (Insert>Slice) and name it appropriately for easy reference.
      4. Click on the slice and go to Window>Behaviors.
      5. Now click on the '+' button and choose Simple Rollover.
      6. Click on OK
      7. Repeat the behavior steps for each of the slices.
      8. The last step is to export the file. Fireworks will automatically convert the rollovers to javascript and html. You don't have do any programming, its automatically done for you when you export the file. You just need to focus on the design and Fireworks takes care of all the boring programming for you. When you export the file there are two things you need to remember to do:

      1. Under slicing you need to choose 'Use slice objects'
      2. Under HTML style choose Dreamweaver 2.0 (or 3.0)

      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.


      I don't understand the bold section. I have made a new frame but don't know how to put the rollover images in it.

      Thanks. Matthew.