TechNote (Archived)

Image rollovers do not export as CSS

Issue

After choosing CSS Layers for the export option when exporting a Macromedia Fireworks 8 file that includes simple rollovers (buttons), the simple rollovers do not work. The resulting HTML page contains only the "up" image(s).

Reason

One of the features of Macromedia Fireworks 8 is its ability to produce pop-up menus that use CSS to determine appearance. Therefore, users might choose the CSS Layers export option in the belief this choice will render the rollover using CSS. This export choice, however, is used to determine placement of the image only and ignores hotspot and behaviors (including the simple rollover or swap image behavior you get with a button). Rollovers and pop-up menus both require JavaScript to perform the action of the page.

Solution

Do not export using the CSS Layers option in Fireworks when exporting image rollovers. Use the HTML and Images export option.

Export settings to achieve typical behaviors

Export: Set the export option to HTML and Images
HTML: Once you set the export option, the HTML drop-down appears. Users commonly choose Export HTML File.
Slices: Choose Export Slices from the Slices drop-down menu in order to get any behaviors attached to the slice.

Advanced Options for Pop-up Menus

These options will determine whether any pop-up menus use CSS to determine appearance or images.

Choose File > HTML Setup. Alternatively, click the Options button in the Export dialog box.
In the General tab, choose the option(s) you want:
- Use CSS for Popup Menus: This option uses CSS to determine the appearance of the menu items. If you do not choose this option, the menu items will be creates as images.
- Write CSS to an external file: This option creates the styles for the popup menus in an external CSS style sheet. If you do not choose this item, the styles will be written to the head of the HTML file.

Note: A separate JavaScript file will still be created for the popup menu behavior, regardless of the CSS options chosen.