D34i : Fireworks Hotspots and Slices

Overview

In this exercise, you'll be taking an image and adding hotspots that produce pop-up text and images when the mouse rolls over them, as well as links to other Web sites.

When you're done, your image should allow the user to look at a panoramic photograph, point to various areas of the panorama, and have a detailed image appear. The user should also be able to click on that part of the image and be linked to a more detailed page of information. The image shown here works that way:

Notice that although the hotspots are rather like rollover buttons, the place where the mouse rolls isn't the same as the place where the image changes.

Step 1: Pick up and save the images

In the space below are the images you'll use. They depict Copenhagen, Denmark, in digital photographs taken from the tower of Vor Frelsers Kirke, with details from various other points.

Create a directory on your Zip disk for this project. Then right-click on each image, and from the pop-up menu choose Save Image As... Save each picture in the new directory on your Zip disk.

Panorama

Crown

Shipping Company Logo

Mermaid

Canal Scene 1

Canal Scene 2

Customs House

Tower

Step 2: Open the panorama in Fireworks

The panorama is the base of the exercise. Open it using Fireworks.

The process of creating a hotspot and pop-up has three main parts:

Creating the frame with contents which will pop up - the "swap image"';
Slicing the swap area; and
Creating the hot spot itself.

We'll be putting in a total of seven hotspots with slices, so you'll get practice! We'll start with the details of the first slice; the rest will be explained in a less detailed way.

Step 3: Put in the first slice and hotspot

A. Create the Swap Image

Open the image. The first hotspot will be the royal palace (Christiansborg) area, so the corresponding pop-up will be the crown. Open it in Fireworks: d34i_p1.jpg.

Get the image. Use the rectangle marquee tool.
Optional extra: In the Tool Options, you may want to choose Feather - about 20 pixels works well. If you do this, you will also need to put background behind the copied slice, which can be tricky.

Select the image (or the part you want) and use Edit > Copy or ^C to copy it.

Make a new frame. Click back into the panorama image. Each pop-up has to be in a frame of its own. In the Frames palette, create a new frame. Double-click the name of the frame and give it a distincitve name - in this case, Christiansborg or Crown.

Paste the new image in. Drag it to where you want it. For the first one, put the crown in the upper left corner of the sky. You may need to click the Transform Tool and make the image smaller if it takes up too much space.

Enter the text. We'll have the name of each area pop up along with the picture. Select the text tool and click near the small image, still in the frame. In the text editing window, type the name: Christiansborg. I used 15 pixel Arial Narrow and found it worked well. I centered the line also. Click OK.

Make the text look good. Drag the text to a good location near the pop-up picture. While it's selected, use Effects in the Properties box to give it a glow. I used a very light yellow for the glow and black for the text, but you may want to experiment with other colors.

B. Create the Slice

Slice it. Use the Slice tool to create a rectangle around both the picture and the text. This marks out the area that will be swapped to make the picture "pop up". Fireworks normally show the slice in green with red guide marks to show where the entire image will be sliced.
Name the slice. Fireworks will automatically give each slice a name, but in order to recognize it easily, it helps to give it one yourself. While the slice is selected, click in the Properties box. In the upper left corner, under the word "Properties" you should see "Slice" and a white field with the file name and _r1_c1 (for example, cities_r1c1). That's the name of the slice. Type in a name you'll recognize. For this first slice, call it either Crown or Christiansborg.

Optional Extra - do this if you feathered your pop-up selection.

Get the background. The pop-up window can have any background you like, but to give feathering the desired effect, we want to use the panorama itself as background. In the Frames palette or the Layers palette, click back to Frame 1. This should be the panorama, but the slice you made should still show in transparent green. Choose the rectangular marquee tool, and make sure it's not feathered - we need to make a hard-edged cut. Select an area the same size as the slice you just made (or a little larger) and copy it.
Put in the background. Switch back to the frame containing your pop-up, and paste the background into it. It will normally be in exactly the right place, so be careful not to move it around. However, it will be in front of your image and text, so while it's still selected, move it to the back.

C. Create the Hotspot

Here's a copy of the panorama giving the approximate area to outline for the first hotspot:

Create the hotspot. Use the polygon Hotspot tool. Click the tool around the edges of the area until you close the path.

Define the behavior of the hotspot. With the selection arrow, click the white circular medalion in the hotspot. In the menu that pops up select Add Swap Image Behavior.

Set the Swap. In the dialog window that opens, there are two things to select:

The slice: Here's where you choose the slice you just created. The first time, there will be only one to choose from, but as you make more you'll be glad if you gave them distinctive names!

The frame: This determines which frame will be used in the slice. If you gave the frame a recognizable name, just click on that name; otherwise, try to remember which frame-number you put it in.

"Preload Images" and "Restore Image on mouseOut" should both remain checked.

Set the Link. Go to the Properties window and set the three items there.

The Link itself: for the first hotspot, use http://www.ses.dk/ses_web/html/dk_slotte/chrslot.htm

The Alt text: Just to keep things simple, use the same name as you used for the slice name - Crown or Christiansborg.

The Target: give the target a name, such as Details, so the browser will open the link in a separate window. This makes it easier for users to keep the image map in front of them.

Save your file and check it with the Preview tab!

Step 4: Create the rest of the pop-ups

Step 5: Export

Step 6: Upload

Audience: This is for people who have created buttons and rollovers in Fireworks (see D33i "Fireworks Buttons and Rollovers" or D32h "Exploring Fireworks, Part 2" (deprecated) and would like to create hotspots for image mapping and masks for special effects.
Objectives: When you successfully complete this lesson, you will be able to...

About this document...
Module D34i: This document is part of a modular instruction series in computer technology. For more information, see the overview or the list of modules in this series, D: Desktop Publishing and Computer Graphics. This document has been used in the following classes:

Fireworks Hotspots and Slices

Module D34i