LESSON 6: IMAGE MAPS AND SLICING
OBJECTIVES
By the end of this lesson you will be able to:
• create and edit links
• copy graphics to URL objects
• make URL link choices
• understand Slicing
• export different aspects of a single graphic as different file formats
CONTEXT
Web pages are often composed of many different types of graphics, JPEGs, animated GIFs, simple line
art, etc. Heavily graphic intensive pages can be cumbersome to produce. Often a Web designer would
need to create different types of images in one program, export them, strip out unnecessary color
information in another program and then reassemble the graphics in an HTML table. It was difficult to
predict what the final product would look like and the various processes could be time-consuming
and complicated.
In Fireworks, many of the processes can be completed from within the program using the URL toolbar,
which simplifies many tedious processes. This toolbar is the control center for designing the Web
components of your graphics.
One of the most important features of Web graphics is the ability to link to other pages using
Image Maps.
An image map is a graphic with URLs assigned to hotspot regions of the graphic. Clicking a hotspot in a
Web browser opens the Web page to which the URL links. A well-designed image map can add
significantly to a Web site’s visual impact.
Show/Hide URL
URL
Selection
tool
URL
Rectangle
tool
Slice tool
Figure 6-1
The URL toolbar
Note: A URL, or Uniform Resource Locator, is an address of a file on the Internet. Although URLs
commonly link to Web pages, they can also link to downloadable files, e-mail addresses, telnet
sites, newsgroups, Internet chat rooms, or other Internet resources.
FIREWORKS CURRICULUM
41
EXERCISES
CREATING IMAGE MAPS
Assigning a target URL
A hotspot is an area of a graphic that is linked to a URL. When a hotspot is clicked, the Web browser
jumps to the Web page specified by the linked URL.
In Fireworks, you define hotspots by creating URL objects. Use the URL toolbar to create and design
URL hotspots within Fireworks images. URL hotspots reside on the URL overlay, a hidden layer at the
top of each Fireworks document. The Layers panel does not display the URL overlay.
In this part of the exercise, you are going to create two hotspots over a graphic that was designed to
serve as the index page of an architecture firm, Arcanum Architecture. The first hotspot will link to a
Web page that is stored locally and the second hotspot will generate a pre-addressed email message.
1. Choose File > Open. Select
imagemp.png. Click Open.
2. Click the Show/Hide URLs button on the
URLs toolbar.
3. Choose the Rectangle URL drawing tool
on the URLs toolbar.
4. Create a hotspot region by dragging a
URLs Rectangle tool around the leftmost
image in the document. Notice how it
changes color when selected.
Figure 6-2
The URLs toolbar Options pop-up
5. Choose New Link from the URLs toolbar
Options pop-up (Figure 6-2).
6. Enter “/drawing.html,” a URL to which
the hotspot will link in the Link field.
7. Enter “Welcome to Arcanum” in the
Browser status bar message field on the
Link Info dialog box.
8. Click OK.
9. The target field allows you to target a
specific frame on a Web page.
Note: Browser status bar messages and
targets are optional.
Figure 6-3
The Link Info dialog box
10. Click OK in the Link Info dialog box.
42
FIR EWORKS CURR IC ULUM
Adding More Hotspots
1. Now you will add an additional hotspot on the
large text “Arcanum Architecture.” You will
be using the Polygon URL tool to draw a more
concise outline.
2. Choose the Polygon URL drawing tool on the
URLs toolbar.
3. Create a hotspot region by clicking at each
corner of the text, Arcanum and Architecture
(Figure 6-4).
4. Choose New Link from the URLs toolbar
Options pop-up.
5. Enter “mailto:[email protected]”
in the Link to field. You are using a
Macromedia address because Arcanum
Architecture is a fictional firm.
6. Enter “Get in touch” in the Browser status
bar message field (Figure 6-5).
7. Click the Overlay Color well and select a
yellow color swatch to organize hotspots by
color. Click OK.
8. To hide the URL overlay, click the Show/Hide
URLs button on the URLs toolbar.
Figure 6-4
Create a hotspot region by clicking at
each corner of the text.
Figure 6-5
Enter “Get in touch” in the Browser status bar message
field of the Link Info dialog box.
When the URL layer is visible, the URL Pointer tool only selects URL objects.
Most other menu items are disabled. The URL overlay can be visually
confusing. Most often, you will want to hide it when you are not actually
creating or editing URLs.
Testing Your Hotspots
Now you are going to export your graphic so that you can test your hotspots.
1.
2.
3.
4.
5.
6.
7.
Choose File > Export.
Choose JPEG from the File format option menu.
Click the Export button.
Save the file as imagemp in the “Lesson 6” folder. Be sure to select the Generate HTML option.
Close the file, minimize Fireworks and navigate to the “Lesson 6” folder.
Double-click on the imagemp.htm file to launch your browser and open the generated Web page.
As you move your mouse over your hotspots, you should notice that the cursor changes to indicate
a hotspot.
8. Test your hotspots by clicking on them.
FIREWORKS CURR IC ULUM
43
MAKING SLICE OBJECTS
A common method of creating navigation bars or navigation graphics for Web sites is to create a graphic
and then cut it into pieces that are then reassembled on a Web page using an HTML table. The graphic
appears seamless in the Web browser but is actually made up of multiple pieces, each a separate file.
Creating a navigation graphic this way has several advantages:
• In HTML, creating a link from an entire image is often easier than using an image map.
• If a section of the graphic is updated frequently, such as today’s date or a current news item, a single
piece may be replaced rather than the entire graphic.
• Parts of a graphic may be optimized individually, creating a better appearance, especially when the
graphic contains a mix of photographic images and text.
• The cumulative file size of all the pieces can be smaller than the single, large graphic, because each
piece may be optimized individually.
In Fireworks, you can use the Slice tool on the URLs toolbar to draw rectangular slice objects. Slice
objects define parts of the image that are exported as individual files. Fireworks automatically divides an
image into multiple pieces based on where slice objects have been drawn.
For example, if you have a JavaScript rollover in the middle of the canvas and you want to export it as a
separate image, draw a slice object over it. Then, when you export the Slices, the JavaScript rollover
and all its states will be exported as separate files defined by the slice object.
Fireworks creates the smallest number of Slices possible by intelligently combining sections of the
image that do not contain slice objects.
To create Slice Objects:
1. Choose File > Open and select obfin.png.
2. Click the Slice tool in the URLs toolbar.
3. Using the Slice tool, draw a rectangle slice object over one of the buttons that you created in
Lesson 3.
4. Make sure that your slice object does not overlap any of the other buttons and includes space for
the rollover text as well.
5. Choose Rollover from the Slice Type pop-up menu.
6. Choose Custom from the Slice Export Settings pop-up menu and click the Launch Export
Preview button.
7. Choose JPEG from the Export file format pop-up menu. Click ok.
8. Repeat for the other three buttons. If you need to modify the slice settings, select the slice with the
URL pointer tool and select Modify > Object Properties.
UP, ROLLOVER, DOWN, AND ON CLICK STATES
You may notice in the Object properties dialog box when you choose Rollover, the option to indicate
frame three as the down state and frame four as the on click state. The options are available if you
would like your button to have a different graphic indicating the button has been pressed and a graphic
indicating that the button is in the process of being pressed. As a review, remember that each button
44
FIREWORKS CURRICULUM
state graphic resides in a single frame, the up graphic is in frame one, the rollover graphic is in frame
two, the down graphic is in frame three and the on click graphic is frame four.
The Down state of a JavaScript rollover depicts the rollover’s state on the destination Web page.
For example, the Down state is commonly used to show which button was clicked to view the current
Web page.
When a rollover is previewed in a browser, its Down state is not shown. To be able to preview all four
states, use a slice object to define each rollover, choose File > Export Slices, and then check Create
Demo Rollover HTML in the Export Slices dialog box. Fireworks exports a group of HTML files with the
word “demo” appended to each file name. Using a browser, open the unnumbered demo file, and then
click the rollovers to test all the states.
Remember that you can optimize each slice object individually
with different palettes, compression settings and export options.
1. Choose File > Export Slices (Figure 6-6).
2. In the Export Slices dialog box, name the file “outback.htm”
and save it in the “Lesson 6” folder (Figure 6-7).
3. Check Put Images in Subfolder and accept the suggested
folder name “Images” to place the image files in a separate
subfolder from the HTML file.
4. The HTML file that is generated creates links to the images in the
subfolder. Be sure to place the images in an equivalent subfolder
when putting your files on a server, or edit your HTML file to
reflect the new location of the images on the server.
5. Click Save.
6. To test your sample HTML page, minimize Fireworks, open your lesson
folder and double-click on the outback.htm file you have created.
Figure 6-6
Choose Export Slices
Figure 6-7
The Export
Slices dialog box
MORE EXERCISES TO SHARPEN YOUR SKILLS
• Using the Reptile Web graphic that you created for Lesson 2, create an image map, then do
the same thing by slicing up your image.
• Test different export options for your photographic images so that you can choose the option
that degrades your image the least.
FIREWORKS CURRICULUM
45
NOTES:
46
FIREWO RKS CURRICULUM