Printable File
Animated Gifs
Image Maps & Rollovers
Optimize Slices and Export to Dreamweaver

 

IMAGE MAPS and ROLLOVERS

 

Fireworks makes some fine buttons, yes sir. You can make image maps, rollover buttons, and disjointed rollovers. Fireworks is better at complicated rollovers than Dreamweaver is.

When you make a rollover or an image map, Fireworks generates HTML and JavaScript code for you. You can easily place Fireworks code in Dreamweaver.

 

Image Maps

You can define clickable areas on an image. Any single image may have more than one clickable area, each area linking to a different page. Coordinates laid out on the image define the clickable sections. The clickable coordinates make a map of sorts; that map is called an "Image Map". The secondary pages for our web design course make use of a number of image maps.

 

Image maps are almost impossible to accurately define when hand coding, but Fireworks makes them easy.

 

To Make an Image Map:

First youll need an image. You can use the Academy of Web Design SF sample image map image below:

The above image is one file, but we will create an image map that will allow users to click on "Academy of Web Design" to go to the schools homepage. If they click on the e-mail address theyll activate a mail link.

The image Map tools are on the lower left corner of the toolbox. You can draw a clickable area, called a "hotspot". Just like in Dreamweaver, you can draw a square, circular, or polygonal shaped hotspot.

  1. To draw a clickable area, select the shape that you wish to draw. Click the shape, then drag over the desired image map area.

* Draws rectangle image map areas.

*Draws circular image map areas.

*Draws irregular shapes. Click to add a point. Click to add another point. Double click when finished.

  1. Draw rectangular shapes over "Academy of Web Design, San Francisco" and "david@awdsf.com"
    These areas will become clickable.

Take care not to overlap the images map areas.

 

Setting the Hotspot URLs

  1. Click a green hotspot area
  2. On the object palette, set the URL to jump to when the hotspot area is clicked.
  3. You can test your image map in a browser by hitting F12 on your keyboard.

 

Exporting an Image Map

An image map can be a JPG or a GIF, exported to any settings.

  1. After optimizing, click FILE-> EXPORT

 

Fireworks will make you the HTML code needed for an Image Map. Take note where you save the code. Youll need it later to place the image map in Dreamweaver.

 

Simple Rollover Buttons

Fireworks can be used to make rollover buttons. Although its easier to create a normal rollover button in Dreamweaver, there may be times when you wont be able to use Dreamweaver.

When rollovers get more complicated, its usually easier to use Fireworks, and you wont be able to build a complicated rollover unless you can build a simple one.

 

Using Frames to Create Rollovers

Youll make a rollover by creating a two-frame image in Fireworks. The first frame will be the button in its normal, "up" state. The second frame will be the button in the "mouseover" state.

 

  1. Create a button
    You can draw or import a button. A button can be any piece of artwork.
  2. Copy the button frame by dragging the Frame onto the New Frame Button
    You now have two frames with the same image. Well have to change the second frame to represent the rollover image.
  3. Click Frame 2 and change the button.

 

Adding a Slice

A slice is an invisible element that can control the exact rollover area. It also acts as a window, through which Fame 2 is displayed upon rollover.

It doesnt matter which frame the slice is on, but it should cover the largest state of the button. For example, if the button is glowing on Frame 2, it will probably be slightly larger than it is on Frame 1. Remember, the slice acts like a window, so if you dont make the window big enough to show the glow, it will cut off the edges of your fancy rollover.

 

To add a slice:

  1. Click your button.
  2. Click INSERT-> SLICE

 

You can resize the slice by dragging its handles.

You can delete the slice by clicking it and hitting DELETE on your keyboard.

 

Adding the Rollover Behavior

So far, weve got two buttons, and a slice. Slices can be used for a variety of different purposes. We still need to tell the slice what to do, what its behavior should be.

  1. Open the Behaviors Palette
    WINDOW-> BEHAVIORS
  2. Select the slice
  3. On the behaviors Palette, add the Simple Rollover Behavior.

 

Adding Links

You can add links to each slice on the Object Palette. You can add relative file path links or complete URLs. If youre planning to use Dreamweaver later, you can also add links there. Either way, Dreamweaver will keep track of links you set while using the program. That way if you move something Dreamweaver will update the link for you!

 

After Optimizing, click FILE-> EXPORT.

Again, take note where you save the file.

 

Multiple Rollovers in One Image

Its okay to have as many rollovers in the same image as you like. Each one gets its own slice with its own behavior (Simple Rollover). Youll need rollover images for each slice on the second frame. The slices cannot overlap, but can be right up on each other.

 

Rollover Recap

To make a rollover, youll:

  1. Make two objects on separate frames. (the objects must be right on top of each other)
  2. Insert a slice
  3. Add the Swap Image behavior to the slice.

 

Hide Slices

Sometimes the slices get in the way while youre trying to edit an image. You can hide slices by clicking on the hide slice button on the toolbox.

 

Disjointed Rollovers

Disjointed rollovers allow you to roll over one image and have another image change somewhere else on the page.

For an example of disjointed rollover images check out:

www.awdsf.com/courseware/examples/disjointed.htm

 

Using Frames to Set up Disjointed Rollovers

Fireworks uses frames to make disjointed rollovers. Your top frame shows upon load. Youll set lower frames to display through a slice window.

Youll need to insert slices over any active part of the disjointed rollover, including the rollover buttons and the items to be displayed. If more than one display item is in the same place, they must be on different frames, but can share the same slice. Remember, you can insert a slice by selecting the desired item and choosing INSERT-> SLICE.

Frame 1 displays when the page loads.

In the below example, Frame 2 contains the rollover object for the Home button and Frame 3 contains the rollover display for the About Us button.

 

Frame 1:

 

Frame 2:

 

Frame 3:

 

Making disjointed rollovers is easiest if you remember that you can copy a frame by dragging it onto the New Frame button on the Frame palette. After you copy the top frame, change it to suit your needs.

 

Setting Up the Rollover

Fireworks makes disjointed rollovers easy. Each slice, when selected, displays a small target icon in the center called the behavior controller.

Youll use the behavior controller to set rollover status for each button.

 

To set a disjointed rollover:

  1. Click Frame 1 and select the slice covering the rollover button.
  2. Drag the behavior controller from the button slice to its display slice.



  1. A pop-up window will appear asking you to choose which frame to display.

In this case, the display image for the Home button is on Frame 2, so well "Swap Image From" Frame 2.

  1. Repeat steps 1 and 2 for each disjointed rollover in the Fireworks file.

 

Removing Disjointed Rollovers

To remove a rollover you set up, click on the connection point on the display slice.

 

Setting Hyperlinks for Disjointed Rollover Buttons

If youre using Dreamweaver to build your final site, youre probably better off setting your hyperlinks there. Dreamweaver allows you to easily click and point to create relative (file-path) links, and also keeps track of your links if things change around.

If you want to set a link in Fireworks:

  1. Select the button slice
  2. On the Object Palette, type a URL or file path.

 

 

Continue to Optimize Slices and Dreamweaver Integration | Back to Courseware