Fireworks

Image Map Settings

The HTML Properties dialog box also allows you to choose settings for your image maps. Use the "Map type" drop down menu to choose the type of Image Map you want to utilize. You have two choices:

1. client side

2. server-side

Client-side Image Maps (USEMAP) use a map file that is part of the HTML document (in an element called MAP) and is linked to the image by the browser. Server-side Image Maps (called ISMAP) involve a separate map file that is linked to the image by a program running on a Web server. Server-side image maps are one of two flavors. NCSA – National Center for Supercomputer Applications or CERN – Conseil European pour la Recherche Nuclaire. They are seldom, if ever, used today. Choose "Client-side" for your Map type.

You can use the "Background URL" field to designate a URL for parts of your image that aren’t linked by Hotspots.

Enter an alternate image description in the field at the bottom of the dialog box so that those who cannot see your image for some reason will at least have a text label describing it.

Lastly, {Click} on the "Set Defaults" button to reset all of the changes that you might have made in the dialog box.  When you are satisfied with your settings {Click} the OK button.

We are now ready to export our map as an HTML document.  Click on the "Save" button and Fireworks will cut your graphic into 4 squares, create an HTML document called "map.htm", place the 4 graphics in a table with 4 cells, and save the HTML document in the same folder as the four graphics.  If your were to choose "Open" from the Menu and navigate your way to the "map" folder you would see a file listing that looks just like this;

17.jpg (18836 bytes)
(Figure 12.14)

As you can see we have an HTML file in our folder called "map" and four graphics that utilize the naming convention that we specified.  The folder also contains the shim graphic that we requested.

If you were to open your favorite browser and use it to view the "map.htm" file you would see a seamless image of the map. However, if you were to view the HTML source for the document you would also see that Fireworks has created a table with four cells and placed the four images in that cell.

Anyone who has spent any time hand coding HTML will tell you that creating tables is a tedious and, sometimes, frustrating process.  The same can be said for slicing graphics.  Combining these two jobs is a rather dull proposal.  Fireworks does both of these tasks for you and it does them very well.  You can cut your graphic up into hundreds of tiny slices if you wish and the program will still manage to build a table to hold them all and maintain the integrity of your image.  Creating a table with hundreds of unique cells is daunting if you write your own code.  Fireworks can complete the task in seconds.

Back to Index