Weekly Newsletter!

Sign up for Mac Alert, the weekly newsletter from the producers of Creative Mac. You'll get news, reviews, features and tutorials, all delivered to your e-mail box.

Sign up now!

 

Our Related Sites
Digital Media Designer
Our Related User Forums

Creative Mac
Macromedia Fireworks

Mac Sites We Like

Ramseeker PowerBook CentralMacinsteinLowEndMacMacs OnlyMacWindowsGo2MacMacSpeedzoneMacReviewzone

 

TUTORIAL MARCH 14 , 2001
Revisiting Popup Menus in Fireworks 4

[Page 2 of 2]

Bringing your menus into an HTML document
For this experiment, I'm using Dreamweaver 4 as my page layout program. You can use anything, but the procedure will be a little different. In Fireworks, save your document. Then select File > Export. Make sure you export HTML and images and that you export slices as well. Also make sure you export the files into the exact directory where they will reside on your server.

Now launch Dreamweaver and open up a document or create a new one. Place your insertion point where your menu will actually reside on the final page. Then choose Insert > Interactive Images > Fireworks HTML.

After you do so, you should see your original image. Now preview it in your browser (F12). Where'd the popup menus go? Probably far off to the top of your page. Not very suitable for use. To get this to work properly, you're going to have to do a little tweaking of the JavaScript. Don't worry. This isn't programming. You're just going to change a couple of numbers.

Fixing the JavaScript
If you're in Dreamweaver, open up the HTML page on which the popup menu will finally reside. Insert your Fireworks HTML in there where you want it. Now highlight the table that contains the Fireworks HTML. Now, in Dreamweaver, go to your code view. (You can get there by clicking the little icon that looks like this ( ) in the top left corner of your current HTML document.

Because you highlighted that table in the regular view, your code view will already have your code highlighted. Find the part of the code that says, <a href="#" onMouseOut="FW_startTimeout();" onMouseOver="window.FW_showMenu(window.fw_menu_0,100,10);" >. (Yours will vary from this.) See that little part at the end that reads, menu_0,100,10? The "100" and "10" are the horizontal and vertical positions of the menu relative to the top left corner of your document (100 pixels over and 10 down). All you have to do is change these to match the position of your actual menu. In many cases, this will be simple because you're probably going to have your menu near the top of your page, and the position won't change much from browser to browser. So just enter appropriate values to match the position of your navigation bar. Repeat this process for each of the menus listed in your codes view (menu_1, menu_2, etc.).

If you have your menu buried somewhere in the middle or near the bottom of the page, this will be more of a problem because the position is likely to be dramatically different depending on the viewer's browser, screen resolution, window size, etc.

Changing the way X and Y are calculated: Placing
your menu and the JavaScript call inside a new
table will cause your menus to work correctly
in Microsoft Internet Explorer only.

Frankly, I don't have a fix for this. You could get around it by setting an absolute height for the table that contains the navigation bar, but there could still be problems. Or you could just assume that every one of your viewers is using Internet Explorer, in which case the simple fix is to put the whole thing inside a new table—the navigation bar and the JavaScript call that gets inported with it. If I discover the fix before Macromedia does, I'll let you know. But right now, you're going to have to live with popup menus that only work properly near the top of a page.

At any rate, this problem forces me to revise my recommendation about upgrading to Fireworks 4 until it's resolved. Hold off until there's a fix for this. There's no reason to go headlong into buying software that's not ready for professional use.

GO TO PAGE [ 1, 2, Complete, Home ]

Post a message in the Creative Mac World Wide User Group.


Dave Nagel is the producer of Creative Mac and Digital Media Designer; host of the Creative Mac, Adobe InDesign, Adobe LiveMotion and Synthetik Studio Artist WWUGs; and executive producer of Creative Mac, Digital Media Designer, Digital Pro Sound, Digital Webcast, Plug-in Central, Presentation Master, ProAudio.net and Video Systems sites. All are part of the Digital Media Net family of online industry hubs.