Macromedia - Fireworks TechNotes: How to create transparent Pop-up Menus

Transcription

1 Page 1 of 6 Home > Products > Fireworks > Support > TechNote Index How to create transparent Pop-up Menus Pop-up Menus can be structured to have transparent or translucent backgrounds. Modifying the Pop-up Menus in this manner will allow you to further stylize your Pop-up Menus and better integrate the appearance of your Pop-up Menus with the overall design your Web site. The image below demonstrates how an underlying image can partial show through a Pop-up Menu with translucent backgrounds. ID: Product: Fireworks Versions: 4, MX OS: All Browser: All Server: None Database: None Former ID: N/A How useful was this document? less more 5 How can the document be improved? (300 characters or less - you will not receive a reply.) View Example 1 to see translucent Pop-up Menu in action. Because this technique involves changing the Menus' JavaScript file, you should already be familiar with how Pop-up Menus are created. You'll find many resources for creating and extending Pop-up Menus in the TechNotes listed under Additional information below. This TechNote provides step-by-step instructions on altering the backgrounds of the Pop-up Menus to be either of the following options: Transparent Translucent Creating a Pop-up Menu with a transparent background 1 Creating the Pop-up Menu In Fireworks, create the button or other item that will trigger the Pop-up Menu. Select the button, slice or hotspot which will trigger the Pop-up Menu. Choose Insert > Pop-up Menu. This will activate the Pop-up Menu creator.

2 Page 2 of 6 In the first section of the creator, enter your text and link information. 2 Click Next. 3 In the second section of the Set Pop-up Menu creator, select HTML for the Cells option. 4 Make the Font selections for your Pop-up Menus, as well as the Up and Over State color selections for the Text and Cells. 5 Click Finish. 6 Choose File > Save to save the PNG file. Save the PNG file in a directory that is either inside the defined site folder or nearby so as to aid Roundtrip HTML editing. 7 Exporting the Fireworks files Choose File > Export to activate the Export dialog box. Click the Save As pop-up list and select HTML and Images. Make your other export selections and click Save to export the Fireworks files into a defined Dreamweaver site. Be sure to export the Fireworks HTML file into the same folder that contains the Dreamweaver file into which the Fireworks HTML will be inserted. A JavaScript file (fw_menu.js) will be exported along with the HTML and images files. The JavaScript file will be located in the same folder you exported the Fireworks HTML file into. 8 Modifying the JavaScript file in Dreamweaver In Dreamweaver, choose File > Open. 9 Browse to find and select the fw_menu.js file generated by Fireworks. 10 You will need to find every line in the fw_menu.js file which uses any of these three words: BgColor bgcolor backgroundcolor Note: Choose Edit > Find and Replace to use Dreamweaver's search feature to locate each instance of the above words. 11 Once you find the line containing the above words, you have two options to disable it: Option 1: Delete the line. (Make sure that you not only delete the text, but the entire line. Removing the line altogether will cause the JavaScript file to download faster.) Option 2: Comment out the line by placing two forward slashes ("//") at the beginning of the line. In programming, to "comment out" means to place a command at the beginning of a line to mark the line as documentation. A browser will ignore any line preceded with two forward slashes. 12 Save and close the JavaScript file. 13 Inserting the Fireworks HTML file into Dreamweaver Open the already-saved Dreamweaver file into which the Fireworks HTML will be inserted. (Or, if one does not yet exist, create a new Dreamweaver document and save it in the same folder that contains the Fireworks HTML file.) 14 Choose Insert > Interactive Images > Fireworks HTML or click on the Insert Fireworks HTML object in the Object panel Example 2. Browse to find and select the Fireworks HTML file. On the Select the Fireworks File dialog box, click Open. On the Insert Fireworks HTML file, click OK. Save the Dreamweaver file.

3 Page 3 of 6 15 Previewing in a browser Choose File > Preview in Browser to test the Pop-up Menus. Example 3 demonstrates Pop-up Menus with a background table cell color; Example 4 shows these same Pop-up Menus with a transparent background. Creating a Pop-up Menu with a translucent background 1 Creating the Pop-up Menu In Fireworks, create the button or other item that will trigger the Pop-up Menu. Select the slice or hotspot which will trigger the Pop-up Menu. Choose Insert > Pop-up Menu. This will activate the Pop-up Menu creator. 2 In the first section of the creator, enter your text and link information. 3 Click Next. 4 In the second section of the Set Pop-up Menu creator, select Image for the Cells option. 5 Make the Font selections for your Pop-up Menus, as well as the Up and Over State color selections for the Text and Cells. 6 Select a Style for the Up State and the Over State. 7 Click Finish. 8 Choose File > Save to save the PNG file. 9 Exporting the Fireworks files Choose File > Export to activate the Export dialog box. Click the Save As pop-up list and select HTML and Images. Make your other export selections and click Save to export the Fireworks files into a defined Dreamweaver site. Be sure to export the Fireworks HTML file into the same folder that contains the Dreamweaver file into which the Fireworks HTML will be inserted. A JavaScript file (fw_menu.js) will be exported along with the HTML and images files. The JavaScript file will be located in the same folder you exported the Fireworks HTML file into. 10 Modifying the JavaScript file in Dreamweaver In Dreamweaver, choose File > Open. 11 Browse to find and select the fw_menu.js file generated by Fireworks. 12 You will need to find every line in the fw_menu.js file which uses any of these three words: BgColor bgcolor backgroundcolor Note: Choose Edit > Find and Replace to use Dreamweaver's search feature to locate each instance of the above words. 13 Once you find the line containing the above words, you have two options to disable it: Option 1: Delete the line. (Make sure that you not only delete the text, but the entire line. Removing the line altogether will cause the JavaScript file to download faster.) Option 2: Comment out the line by placing two forward slashes ("//") at the beginning of the line. In programming, to "comment out" means to place a command at the beginning of a line to mark the line as documentation. A browser will ignore any line preceded with two forward slashes.

4 Page 4 of 6 14 Save and close the JavaScript file. 15 Modifying the Up-state and Over-state GIF files In Fireworks, choose File > Open. 16 In the Open dialog box, browse to find and select the two GIF images which were created for the Pop-up Menus during the export process. Names of the GIF files The names of the GIF images will be something like "fwmenu1_###x##_up.gif" and "fwmenu1_###x##_over.gif." In these examples, "#" represents a number. Location of the GIF files These images will be located in the folder you designated on the Export dialog box to contain the document's image files. Click the first image and then Shift-click to select the second one. Example 5 displays this dialog box with the two Pop-up Menu GIF images selected. 17 On the Open dialog box, select the Open as Animation option. 18 Click Open. One file will be opened. One GIF image will appear on Frame 1 and the other on Frame Because the "o" in Over is before the "u" in Up in the GIF file names, the GIF files will appear on the frames in the reverse order that they appear in the Pop-up Menu. To swap the frames that the images appear on, choose Commands > Document > Reverse All Frames. This will cause the Up image to appear on Frame 1 and the Over image to appear on Frame Choose Window > Frames to open the Frames panel if it is not already open. 21 Double-click Frame 1. In the pop-up box, name the Frame the same name (minus the extension and period) that the Up image had when exported from Fireworks (see Example 6). 22 Double-click Frame 2. In the pop-up box, name the Frame the same name (minus the extension and period) that the Over image had when exported from Fireworks. Your frames panel should now appear similar to the one in Example Click the first frame (with a name similar to fwmenu1_###x##_up.gif) on the Frames panel. 24 Select the bitmap image currently on the first frame. Choose Edit > Cut. 25 Click the second frame (with a name similar to fwmenu1_###x##_over.gif) on the Frames panel. 26 Select the bitmap image currently on the second frame. Choose Edit > Cut. 27 Click the first frame on the Frames panel. 28 On the canvas, draw a rectangle (using the Rectangle tool) with the same dimensions as the canvas. Choose Modify > Canvas Size to determine the width and height dimensions of the canvas. Choose Windows > Info to open the Info panel. With the rectangle selected, enter the canvas' width dimension in the Info panel's W text box. Enter the canvas' height dimension in the H text box. Now enter "0" in both the X and Y text boxes on the Info panel. Press the the Enter key. The rectangle that you just created should fit exactly over the canvas. 29 With the rectangle selected, select None on the Styles panel (this will eliminate any stroke on the rectangle's path). 30 With the rectangle still selected, click the Category pop-up menu on the Fill panel to select Web dither. 31 Click the top right color box in the Websafe dither color boxes and select a color. Click the lower right color box and select white (see Example 8).

5 Page 5 of 6 32 Select the Transparent option on the Fill panel (see Example 9). 33 Select the rectangle. On the Frames panel, open the Options pop-up menu (by clicking the arrow in the upper right-hand corner of the panel) and choose Copy to Frames (see Example 10). 34 On the Copy to Frames dialog box, select Next Frame. 35 Click OK. 36 If you desire that the Over-state GIF image have a different Web dither fill, click the second frame on the Frames panel. Select the rectangle on the canvas. On the Fill panel, choose another color for the Web dither. 37 Open the Optimize panel by choosing Windows > Optimize. 38 On the Optimize panel, select Index Transparency in the Type of Transparency pop-up menu. 39 Select the color white in the Matte color pop-up box. 40 Choose File > Export. 41 Browse to select the folder in your site which contains the original images. 42 Click the Save as Type pop-up menu and select Frames to Files. 43 Click Save. A message box will ask you if you want to overwrite the image files. Click OK. 44 Inserting the Fireworks HTML file into Dreamweaver Open the already-saved Dreamweaver file into which the Fireworks HTML will be inserted. (Or, if one does not yet exist, create a new Dreamweaver document and save it in the same folder that contains the Fireworks HTML file.) 45 Choose Insert > Interactive Images > Fireworks HTML or click on the Insert Fireworks HTML object in the Object panel Example 11. Browse to find and select the Fireworks HTML file. On the Select the Fireworks File dialog box, click Open. On the Insert Fireworks HTML file, click OK. Save the Dreamweaver file. 46 Previewing in a browser Choose File > Preview in Browser to test the translucent Pop-up Menus. Additional information For more information about Pop-up Menus, consult the following: Multiple Pop-up Menu HTMLs inserted into one Dreamweaver file (TechNote 15573) Customizing and troubleshooting Pop-up Menu images (TechNote 14995) How to set the length of time a pop-up remains visible (TechNote 15007) Fireworks 4 Pop-up Menus in Dreamweaver 4 templates (TechNote 15088) Fireworks Pop-up Menus in Dreamweaver Library files (TechNote 15101) Using anchor tags with Fireworks 4 Pop-up Menus (TechNote 15161) Assigning behaviors to Pop-up Menu items (TechNote 15369) Fonts in Pop-up Menus (TechNote 15342) Note: Aspects of Fireworks features were improved in the Fireworks Updater. See Fireworks 4 and release notes for specific information about the updater.

6 Page 6 of 6 Last updated: August 5, 2002 Created: June 21, 2001 Company Site Map Privacy Contact Us Accessibility Report Piracy Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use.