Using Fireworks to Create Buttons and Menu Effect

Disjoint Rollovers
Disjoint rollovers are created when one object, the trigger, is designed in such a way as to make another object, the target, appear. Disjoint rollovers can be created for both simple effects, such as having an additional explanation appear when a button is rolled over, to designing an entire page that uses disjoint as their basis.

In this exercise you'll build a fairly complex rollover, using three buttons that will make text appear in the center of the document. Once you get the hang of it, disjoints are lots of fun to make, and they can add a great look to a web page. You can see the finished product for this exercise by clicking here.

Tip: Shift-click to select all of the text boxes and choose Modify | Align | Distribute Heights to line up your text boxes equally from top to bottom.

This provides the first part of the disjoint rollover--the three triggers that will activate the image in the other part of the document. Since we also want the buttons to have a simple rollover behavior, we'll need to take a few additonal steps to prepare the document. Next stop, the Frames panel.

Tip: Use the Layers panel to make it easier to select the different objects on your canvas. Once you begin adding slices it can often become a little tricky when you're trying to select graphics. Just look for the thumbnail of the graphic, select it, and then insert the slice.

 

Tip: Since a fair number of images will be generated on export, it's a good idea to create and designate a folder to hold all the images in the Export dialog box. Below is how your finished product should look.

Roll Over the Menu to see how the Disjoint Rollovers behaves.
Back to top


Creating a Pop Up Menu

See My PopUp Menu

FYI: If I were using frames, I could use the "Target" box to specify which frame the linked page should open in.

If you wanted to add additional sub menus, simply enter the name you want in the normal way, drag it up so that it appears below the heading box highlight it and hit the sub menu icon.

Once you have all your names and links entered, click "Next" at the bottom of the box.

This is where you get to choose the colour scheme for you text and background. You can also set up the font and text size. The normal warnings about using unusual font faces apply.

At the top of the page you will see radio buttons labelled"HTML" and "Image". Our pop up is being built using the HTML setting. If you click on the Image button, you will be presented with a selection of images that you can use in your pop up. Try them out. Once you are happy, click "Finish".

You are now presented with a layout view of your finished pop up menu. You can preview the final product in a browser by pressing the "F12" button on your keyboard.

You can also move the position of the pop up box by using the white arrow tool and dragging the box to a new position on your page.

To save the graphics and code of your pop up ( for later copy and pasting to your web site) select "File" > "Export" and save your work as HTML and Graphics.

When you copy and paste the code generated in Fireworks to another web page, it is quite possible that the pop up menu will not appear exactly where you want it to. Go into the JavaScript that you pasted into the Body of your page and alter these settings (highlighted in red)

<script language="JavaScript1.2">fwLoadMenus();</script>
<img name="chefs" src="chefs.gif" border="0" usemap="#m_chefs">
<!-- fwtable fwsrc="Untitled" fwbase="chefs" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
<map name="m_chefs">
<area shape="rect" coords="6,3,124,92" href="#" onMouseOut="FW_startTimeout();" onMouseOver="window.FW_showMenu(window.fw_menu_0,249,225);" >
</map>

These two numbers control the horizontal and vertical position of your pop up. If you have any problems with the positioning of the "Hotspot" over your button graphic, you can re align it using Dreamweaver's image map facility.