Making an Image Map

 < Day Day Up > 



An image map is often used when it is inconvenient or difficult to slice up a graphic into individual elements. By default, only one link may be placed on an image. With an image map, you can designate several clickable "hotspots" or areas in a single image, allowing more than one link to be added to the image. You can even add behaviors to the hotspots. Hotspots are defined with drawing tools that build rectangles, ellipses, or polygon coordinates. An Image map is easily made in Macromedia Fireworks and can be copied or exported for use in HTML pages.

A common use for an image map is a navigational line across a page. Figure 20-20 shows the bar we will add hotspots to. A hotspot is the area that is "hot" when a cursor goes over it. A hotspot is an area that is clickable.

click to expand
Figure 20-20: A navigational line that will have hotspots added to it

Use the following steps to create an image map in Macromedia Fireworks MX:

  1. Open  imagemap.png file from the chapter20_exercise folder (Figure 20-20).

  2. Select the Rectangle Hotspot tool. If you click and hold on the corner of the tool icon you'll see that there is a Circle and a Polygon shape available as well.

    Note 

    When you make a Polygon shape, the shape area is the "hotspot," although it will still be sliced as a rectangle.

  3. Draw a rectangle over the Home word as seen in Figure 20-21. It will have a blue overlay when the hotspot is drawn.

    click to expand
    Figure 20-21: A hotspot is added to the word Home

  4. In the Properties inspector add the link name and the Alt tag as seen in Figure 20-22.

    click to expand
    Figure 20-22: The Property inspector showing the Link and the Alt tag added

start sidebar

Foolproof Pop-up Menus, by Kim Cavanaugh

First introduced in version 4 of Fireworks, the pop-up menu feature has been one of the most popular, and troubling, new additions to Fireworks. While pop-up menus have been greatly improved in Fireworks MX, they can still present quite a challenge. Much like making a soufflé, it's easy enough to mix the ingredients together. However, once things get popped into the oven, or in this case, into your Web site, things can go wrong in a hurry if you don't have good understanding of the rules for the implementation of pop-up menus.

Before beginning to use pop-up menus then, take a look at the components that comprise them. You'll have much more success if you have a good understanding of the separate components that need to work together to make these dynamic objects function correctly.

The first component of the menu system is the graphical object where all the JavaScript behaviors are attached. Designed in Fireworks, the images are the easiest part of the recipe to put together. Simply decide on the appearance that you want and design away. Once you're ready to put the menu into the page Fireworks will use an HTML table to hold all the pieces of the image together and provide the code to attach the triggers to each image.

The second part of the pop-up menu is contained in the <head> of each document that uses the menu. This JavaScript can be quite large, and will often add 25 to 30K of file weight to your page. The JavaScript in the head controls the function of the pop-up menus and accounts for browser issues so that the menus will function in as many browsers as possible.

The third part of the menus is a small bit of script that resides in the <body> of the document and is responsible for calling, or causing an external script to function.

Finally, Fireworks will generate an external script that loads the layers themselves into the page and controls their appearance. This file, named "mm_menu.js" is the key to the appearance of your menus.

When all four of these objects are working in concert pop-up menus function exactly as expected. Most problems with the menus result from a failure to keep these objects working in the proper relationship or when changes are made with one part of the system without taking into account the effect the change has on the other components. In this tutorial you'll have the opportunity to see one method for ensuring that your menus function correctly every time and how you can plan ahead so the inevitable changes you'll need to make later on don't cause the entire menu system to fall flat.

In this tutorial you'll be designing a menu system for a fictional chamber of commerce for the equally fictional town of Poinciana Key, Florida. As with any navigation system you'll want to consider the structure of your Web site before you begin building the pages and how the different sections of the site will be linked together. When using pop-up menus in particular it's important to keep the relationship of your files and folders in mind as you build the objects. While you can use relative links to the pages in your site as will be done here, absolute links often work much better if you want to create multiple subfolders and employ templates to control the appearance of the individual pages.

With all of that in mind, let's get started.

  1. In the chapter20_exercise folder on the CD-ROM, locate the file called  menu_sample.png. This simple sample file has been designed to take a little of the work out of the setup of the menus and contains five buttons with slices applied to them.

    The process of building the menu objects themselves is really quite easy. Fireworks MX provides a dialog box with four tabs that allow you to set the content, appearance, advanced properties, and location of the menus:

  2. To begin building your menus select the slice over the Lodging button on the far left of the canvas and then click the Behavior handle (little circle) that appears in the center of the slice. From the available options that appear select Add Pop-up Menu.

  3. Once you've made this selection the Pop-up Menu Editor will launch. The Editor has four tabs at the top to allow you to set the properties of the menu objects. By default the first tab that will be active is the Content tab. This is where the text that will appear in the menu is set along with the link to the page that will open when the menu object is selected.

  4. For this tutorial set the text area and links as listed below. You can also refer to the illustration below to see how they have been applied.

    Abel's Motor Lodge

     abels.htm

    Baker's Family Motel

     bakers.htm

    The Green Turtle Inn

     green_turtle.htm

    click to expand
    The Pop-up Menu Editor when it first opens.

  5. At the bottom of the Editor locate the Next button and click it to move to the next tab, where you'll set the appearance of the menus.

    Examine the contents of the Appearance tab to orient yourself to the features found. As you see there are a number of ways to set the appearance of your menu objects. The first choice to make is whether to use HTML elements in the menus or to use images. Generally speaking, since HTML will produce slightly faster page load times that type of menu is preferred. Remember that the JavaScript alone will require at least 25K of file weight and in order to get your pages to load as quickly as possible you'll want to be conservative with your menus wherever possible. However, feel free to experiment with the various settings that can be changed to affect the way your menus appear. As you make each change note that Fireworks provides a preview of how the menu will appear when the menu first appears (Up state) and how it will appear when the mouse passes over it (Over state). For the illustrations that you'll see as this tutorial progresses the menu styles have been set to HTML.

    click to expand
    The Appearance tab where you set the font attributes, type of menu, and cell colors.

    Tip 

    The styles that are used in the image option for the menus are the same ones that appear in the Assets panel. A great way to customize the appearance of your menus is to create and save a custom style. Once the style is saved it will become available as an option in the Pop-up Menu Editor.

  6. Once you've set the appearance of your menus click the Next button again to move to the Advanced tab. You can leave these settings at their defaults for now or experiment with the ways they affect your menus.

    Notice the features such as the ability to modify the amount of time that the menu appears (Menu Delay), the amount of space that surrounds your text in an HTML cell (Cell Padding), and options for setting the borders and shadows for HTML elements of a menu. Note that there are fewer options available if you choose the image setting for your menus.

    Caution 

    Setting the Menu Delay at settings smaller than 500 will often cause menus to fail in some older versions of the Netscape browser.

  7. The final tab controls the location of your menus and gives you the option to fine-tune where they will appear in relation to the slice they are attached to. For this exercise click the second button from the left so the menu will appear directly below the button and aligned to the right. Note that Fireworks MX also allows you to provide precise pixel-level control of the menus by specifying exact X and Y coordinates as well.

  8. With all of your settings complete, click the Done button, save your file. Time to see how this first object appears in a live browser.

  9. Select File®Preview in Browser (or press F12) for a preview of the navigation bar with its first menu attached.

  10. If you find that you're not happy with the look of your menu simply select the slice again and choose Edit Pop-up Menu from the menu that appears when the behavior target is clicked.

    Tip 

    Getting the menu looking the way you want with the first set of menus will save you a great deal of time later on. Since Fireworks will remember all the settings you apply as you move on to the next slice, setting your menu appearance now will let you zip through the rest of the tutorial.

Adding a menu to the additional buttons

With the first menu set, it's time to move on to the additional slices and apply the menus. Since Fireworks will remember the appearance and advanced settings you've applied, you need only enter the text, links, and set the menu's position for the remaining items.

  1. Follow the guide below for setting the text and links for the additional buttons in your menu:

    Restaurants

    The Greenhouse

     greenhouse.htm

    Marker 98

     marker98.htm

    Angelo's Ristorante

     angelos.htm

    Boating

    Glass Bottom Tours

     glbottom.htm

    Sunset Sailing

     sunset.htm

    Mullins' Boat Rentals

     mullins.htm

    Fishing

    Back Country Charters

     backcountry.htm

    Deep Sea Adventures

     deepsea.htm

    Lazy Day Sportfishing

     lazyday.htm

    Diving

    Diver Down Dive Shop

     diverdown.htm

    Lady Luck Dive Boat

     ladyluck.htm

    Coral Seas Diving

     coralseas.htm

    Tip 

    Remember to save as you work and to preview your menus often in a browser.

    Now that the appearance of all the menus and the content that is to appear in each is set, it's time to move on to the actual export of the menu, and it's time to move on to the site and prepare it for their use.

    To prepare for this tutorial you'll need to create a new folder on your computer as the root folder for the Web site, along with one subfolder to place the images in.

  2. Choose a location on your computer's hard drive or on the desktop and create a new folder called pksite for our fictional town of Poinciana Key. Open that folder and create a subfolder called menu_images.

  3. Before exporting the file one additional change needs to be made for this file. Return to Fireworks and select File ® HTML Setup.

  4. In the dialog box that appears check the box labeled "Include HTML Comments" on the General tab. You'll see in a few minutes why this is helpful for implementing your menus.

  5. With the groundwork out of the way it's now time to export the menu into the Web site. Choose File ® Export to open the Export dialog box.

    click to expand
    The Export dialog box

  6. Change the name of the file to pkmenu in the File Name field and navigate to the folder you created in the previous step. Be sure that you check the option to put the images in a subfolder and select the folder called "menu_images" as the location for all of the images.

    Note 

    While this simple menu will not create a great number of images, it's best to always use the images subfolder option when creating pop-up menus.

  7. Match your settings to those in the illustration and click the Save button to export all of your files.

  8. At this point you can save your file and exit Fireworks as you move on to Dreamweaver to complete the project.

Adding the menu in Dreamweaver

  1. In Dreamweaver choose Site®New Site and define your site for this exercise.

    Cross-Reference 

    If you are unfamiliar at this time with defining a site refer to Chapter 32 in the Dreamweaver section.

  2. Set the name of the site as Poinciana Key and navigate to the pksite folder you created previously and set it as the root folder.

  3. Once Dreamweaver completes the survey of your site's files, open the Site panel and review the files that were created when your menus were exported.

    Your site files should match those you see in the Site panel illustration. Note that in addition to the HTML file that was created and the image files, the all-important file called "mm_menu.js" has also been placed into the root folder.


    Site panel showing the files within the defined site of Poinciana Key

    Of course this site has no real Web pages in it as of yet, so your first job is to create new files that match the filenames that were set in Fireworks.

  4. Start by setting a home page for this site by right-clicking the root folder at the top of the site structure and choosing New File from the context menu. Name this file  index.htm.

    Once your home page is established, refer back to the filenames that you assigned in Fireworks and create a new file for each page, keeping all of the files in the root folder.

    Note 

    This tutorial uses a flat site structure where all of the pages are contained in the root folder. While you can use a more traditional site structure where individual pages are contained in subfolders of the site, the only practical way to link to your files in that situation is to use absolute URLs.

The four components of the pop-up menu

You'll recall from the introduction to this tutorial that there are four components that must be taken into account when using the pop-up menu feature:

  • JavaScript in the head of the document

  • Graphical images

  • The call to load the JavaScript

  • The external file called  mm_menu.js that controls the appearance of the menus

The next steps you'll take will use each of these components to ensure that your navigation system works every time and is easy to upgrade and change as the needs of your site grow.

  1. Double-click the file called  pkmenu.htm in the Site panel.

    This will open the HTML file that was created when you exported the menu file from Fireworks. All of the components you'll need for your menus are in this file.

    The graphical objects are contained in a table that Fireworks created and can be converted to a Library item for re-use. While this Library item won't contain any JavaScript, it's useful to convert it so that any changes that only affect the appearance of your menus can be easily updated.

  2. Click the edge of the table so the re-size handles appear and the table is listed in the Property inspector as a Fireworks Table.

  3. Once the table containing the buttons is selected, select Modify ® Library ® Add Object to Library.

  4. Name the new Library item "menu bar." Leave this file open as you move to the next step. The next object to create is a template file where you'll complete your final assembly of the menu and define the structure of your pages.

  5. Choose File ® New and in the New File dialog box choose Template as the category and set the file to be an HTML Template.

  6. Click the Create button to generate your template.

  7. Choose File®Save to save the template and name it PK Main. You can ignore the warning about the lack of editable regions.

    Since you'll want to see things actually happening, set up the template file with some simple tables to insert the content for the site as well as the menus.

  8. Insert a single table with 2 rows and 1 column at the top of the template page, followed by a second table with 1 column and 1 row below it.

  9. Select the second table and right-click the table and choose Templates ® New Editable region. Name this editable region "Content".

    In the example you see in the template illustration shows that an image placeholder has also been added at the top of the template for a banner.

    click to expand
    The template file showing the area that the pop-up menu will be added to

  10. Save the template file when you are done. The menu will be added in the area below the banner.

  11. To put the graphical objects into the template, all you need to do at this point is drag the Menu Bar library item from the Library into the cell below the banner placeholder.

  12. Set the alignment of the cell to Center by selecting that option in the Horizontal alignment field of the Property Inspector. That's one object down and three more to go.

  13. Return to the  pkmenu.htm file and switch to Code View or Split Code view and locate this bit of script that is located in the body of the document:

    <script language="JavaScript1.2">mmLoadMenus();</script>
  14. Copy the script and return to the template and switch to Code view. Paste the script in the first open line after the opening body tag. When you are finished the section of your page where the body tag begins should look like this:

    <body> <script language="JavaScript1.2">mmLoadMenus();</script> <table width="95%" border="0">
    Note 

    It is important to place this script directly after the opening body tag to ensure the menus function correctly in Macintosh browsers.

  15. Back to the  pkmenu.htm file for one more copy and paste routine. This time the script you need is in the head of the document. If you chose the option to use HTML comments previously you'll find the script easily enough. The key here is to capture all of the script beginning with this section:

    <script language="JavaScript"> <!-- function mmLoadMenus() {      if (window.mm_menu_0726104544_0) return;          and concluding with this section:          //--> </script> <script language="JavaScript1.2" src="/books/2/375/1/html/2/mm_menu.js"></script>
  16. Copy the entire section and return to the template file.

    Note 

    Do not copy the comment when completing this action. It is there only as a marker to let you know where to begin copying. In fact, attempting to copy and paste the comment will cause the operation to fail.

  17. As you'd expect the goal is to paste the JavaScript into the head of the template file. Locate the closing head tag, move one line above it, and paste the script into place. That's three objects, and now for the final component.

    In order to test your template, or to allow any menus in subfolders of your site to function correctly, you must place a copy of the  mm_menu.js file into the folder where the pages are located.

  18. In the Site panel, right-click the  mm_menu.js file and select Copy from the context menu. Right-click the Templates folder and choose Paste.

  19. Save your template and preview in a browser. With all of the steps completed your template will preview and you'll be ready to apply it to the pages in your site.

  20. You can finish up by opening the pages in your site and choosing Modify ® Template ® Apply Template to Page. As the template is applied to each page you'll be able to preview in a browser and see that the menus are functioning correctly. Finally! Mission accomplished!

While the method demonstrated here may seem incredibly laborious, it is one that is proven to work every time and to be easy to update as the needs of your site change. By following this method you'll also avoid some problem areas that are known to crop up from time to time when using pop-up menus.

In order to apply changes, you would essentially repeat the process. Note that it is not recommended that the file be edited from Dreamweaver. In brief, the correct method for making changes is as follows:

  1. Open the source Fireworks PNG file and modify as necessary.

  2. Re-export the file to the same folder in your site and overwrite all files.

  3. Delete the existing Library item, taking careful note of the item's name.

  4. Open the Fireworks HTML file and select the table containing the graphical objects.

  5. Convert the table to a Library item, using the same name as you had previously assigned. Update the library items in the site.

  6. Open the template file and delete the script in the head of the document.

  7. Copy and paste the script from the Fireworks HTML file into the template.

  8. Replace all instances of the  mm_menu.js file that you've copied into your site structure.

  9. Update all files created from the menu.

Thus, Fireworks pop-up menus are create by an incredibly sophisticated bit of technology that is deceptively easy to use. While building the menus is easy enough, there are so many quirks and strange turns that can happen along the way to implementing them that it is best to take a methodical approach to their use. In this tutorial you have seen one method for ensuring that your menus will function correctly and that the inevitable changes you'll need to make as your site's needs change will be easy to implement.

end sidebar



 < Day Day Up > 



Macromedia Studio MX Bible
Macromedia Studio MX Bible
ISBN: 0764525239
EAN: 2147483647
Year: 2003
Pages: 491

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net