How to Create and Link Image Maps in Fireworks CS5

When you create a graphic in Adobe Fireworks Creative Suite 5 and add multiple hotspots (hyperlinks) to it, it becomes know as an image map.

Use an image map to define clickable regions in an image.
Use an image map to define clickable regions in an image.

Create an image map in Fireworks

To create an image map, follow these steps:

  1. Open a graphic file you want to assign multiple hotspots to.

  2. Click and hold the Rectangle Hot Spot tool in the web section of the Tools panel and choose one of the three hidden hotspot tools: Rectangle, Circle, or Polygon.

  3. If you chose the Rectangle or Circle tool, simply click and drag to define the hotspot. To create a region with the Polygon tool, simply click and release from point to point to create a custom region.

If you didn’t get the shapes just right, don’t fret. You can use the Pointer and Subselection tools to move and resize the hotspots.

Link a Fireworks image map

After you define a hotspot, you can define the location (typically, a web page) that you want the hotspot to link to.

  1. Choose Window→URL.

    The URL panel appears.

    image1.jpg
  2. Type a URL address that you want the viewer to go to after selecting this region.

    Note that you can add your URL to a library for later use by clicking the plus sign to the right of the URL text box.

    When you reference pages beyond your website (external links), you must start the link with http://.

  3. Choose Window→Layers to display the Layers panel.

    The hotspot you created appears as a separate sublayer of the web Layer.

  4. Double-click the name of this sublayer and give it a more appropriate name.

    image2.jpg

Here are some types of links other than URLs that you can use:

  • E-mail address: Type mailto:youremail address in the URL text box to create a link that opens a message window, with your address already entered and ready to go!

  • Link to another page in your Fireworks document: Many people like to create prototypes of their websites in Fireworks and demonstrate the link from one page to another. You can use the Pages panel to add a page to your document and then use the Link drop-down menu to link from one page to another.

To export multiple pages from Fireworks, choose File→Export and then select All Pages from the Pages drop-down menu. You can test your links by opening the newly created HTML file in a browser.

image3.jpg
  • Non-HTML files on the server: You can type 2010/catalog.pdf, for example, to instruct the browser to open a PDF file named catalog that’s inside the 2010 folder.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com