Logo

Title Bar

Home
Custom Shape
Manipulation
Orginization
Rollover Button
   

 

 

 

1. Intro 2. Pop-Up Editor 3. Export to Dreamweaver  


To start off, open up Macromedia Fireworks. If you are continuing from the Rollover Button tutorial, you can safely close Dreamweaver for now. The Fireworks button that you have created is all we will use from the previous tutorial. This tutorial is written assuming that you are continuing from the previous tutorial.

Your button should look like this.

Make sure that the slice is selected then,
Click Modify - Pop-Up Menu - Add Pop-Up Menu

The Pop-Up Menu Editor will open up. The Pop-Up Menu editor is a window with four tabs: Content, Appearance, Advanced, and Position. All four of these windows can be seen below.

Content

Appearance
Advanced

Position


The first window, the Content window, is where you enter the text that you would like to appear, and the pages that you would like your text to link to. The number of items you enter will determine the number of items that will be displayed in your pop-up menu.

As you can see, I've added two items in my pop-up menu. The top one will display "Lehigh" while linking to http://www.lehigh.edu. Similarly, the second item will display "IMRC" while liking to http://www.lehigh.edu/~inimr.

The Target column tells the browser how to display the linked document.

_blank will open up a new browser window to display the page in, _parent will open the link up inside of the current frame (if your site does not use frames, _parent is the same as _top),
_self
loads the document in the same window in which it was clicked in, and
_top will remove all frames in the current window and display the linked document in the current window, using the full window.

If the column is left blank, _self is the default.

The next tab, the Appearance tab, allows you to customize the text size, the background, font, alignment, and many other properties of your links.

I've chosen to create a pop-up menu with a graphical background (You have a choice of HTML or Image). I've also selected to have the contents displayed vertically and to use the default font in size 14. The bottom two options (Up State and Over State) determine how the button will appear when someone does not have their mouse pointer over your graphic (Up State) and how it will appear when someone does have their mouse pointer over your graphic (Over State). You do not need to select the same options I have here, this tab is strictly preference.

The next tab, Advanced, determines the dimensions of the pop-up menu, padding, spacing, and the delay (the amount of time after the mouse has left the graphic that the pop-up menu will remain visible)

Everything on this tab can be left alone. The only thing you may want to adjust is the Menu Delay. The default of 1000 milliseconds (1 second) should be fine for now.

The next tab, Position, will determine the X & Y coordinates of where the menu is displayed.

The default value of (0,0) will place your pop-up menu in the top-left corner of your graphic, like the button below.

A common method is to make the Y-coordinate approximately equal to the height of your button. This way, the pop-up menu appears on the bottom of your button. You can, of course, customize your own.

For my button, I've chosen an X-coordinate of 50, which makes the button relatively centered, and a Y-coordinate of 48, which makes the menu appear just below the graphic.

Click Done to close the Pop-Up Menu editor.

Your button should now have a light blue outline of where the pop-up menu will appear. If you would like to adjust the position of the pop-up menu, simply click on it with the black arrow tool, and move it.

The next step is Exporting your button and pop-up menu to Dreamweaver for use in a web page. Arrow