How to make a link at a hotspot within an image with Fireworks

by A. Koch (18 June 2003)

Steps:
  1. First you have to know the size of you image.
  2. After you opened the program, go to File --> New and enter the size of your picture.
  3. Go to File --> Import and import your picture.
  4. Go to the cyan colored rectangle in the left Toolbar.
  5. When you hold the mouse button down, you can choose between a rectangle, circle or a polygon hotspot.
  6. Once you placed your hotspot in the right position, you see a cyan rectangle or any other shape that what you choose.
  7. With the arrow keys you can move the hotspot.
  8. At the bottom of you screen is the Properties bar, write in the link field your link.
  9. Do not forget to press Return.
  10. At the right site of your screen is the layer bar you can change the name of the hotspot in the Web Layer part.
  11. You should know, that you can not see the link at the picture.
    Test it: go to preview at the upper edge of your picture window and hold the mouse over the area where you have made the link.
  12. If you want to see where on your picture the link is, you have to go back to the Original (at the top of your window).
  13. Choose in the toolbar your color for the point.
  14. Go to the white rectangle in the vector part of the tool bar, when you hold the mouse button down, you can choose between a rectangle, circle and other shapes.
  15. Make the point at the same place where you already placed the link.
  16. Rename the point in the layer bar under the Layer 1 section.
  17. Like the hotspot, you can also find the right position for your point with the arrow keys.
  18. You can change the width of the hotspot and point in the Properties bar at the bottom of you screen.
  19. For this you must have always marked the right layer in the left layer bar (blue background).
Export from Fireworks:
    The best way to export the pictures and the links is to use the Export Wizard in the File menu.
Import into your html file:
    Copy the whole part between the opening "image tag" before the "map name" tag and the closing "map tag" into your html file.
    Copy the picture (created by Fireworks) in the same folder like your html file.