Macromedia Fireworks Image Map Tutorial

You are here: irt.org | Articles | JavaScript | Image | Macromedia Fireworks Image Map Tutorial

Published on: Sunday 3rd October 1999 By: Martin Webb

• Introduction
• Image Maps
• Working Example
• Example Files
• Conclusion

Introduction

When the software arrived, it contained one CD-Rom, one 134 page "Using Fireworks" guide, one registration card and a small brochure. It sat on the desk for ages before I eventually got around to looking at it in more detail. Looks can be deceiving. This is an extensive graphics package with HTML capabilities thrown in. Macromedia Fireworks is not a bit image graphic package, but object based. This may take a while getting use to, for those who are not familiar with object based graphics tools.

Object can be layered over one another, manipulated independently or grouped together, and even after saving, using Macromedia Fireworks .png file format can be reloaded and manipulated further.

When first started you are presented with a widget heavy window. See the Screen Shot.

Macromedia Fireworks is a complicated piece of software, that can't possibly be given justice in one superficial tutorial, its many capabilities include:

• Live Effects - drop shadows, bevels, glows, embosses

• Vector Tools - Berier paths and shapes

• Tect Control - kerning, leading, text effects, editable text

• Export Preview - compare the different export options

• Export Optimization - palette settings, dithering, optimized web graphics

• Batch Processing - apply optimization and export settings to many images

• Animated GIFs - create and edit

• Image Maps - client side and server side

• JavaScript Rollovers - code generated for buttons

• Image Slicing - HTML code generated to reassemble and add URLs to sliced images

This tutorial will concentrate on only one of these features...

Image Maps

An image map consists of an image and an image map. The image map defines different hot spots within the image. These hot spots each have a URL associated with them. When the mouse pointer is clicked on one of these hot spots, then the browser loads the associated URL. The hard part is defining the area that each of these hot spots covers - using rectangle, circle and polygon shapes.

The rest of this tutorial will demonstrate how easy this is to do.

1. Create or open a source graphic on which to place a hotspot

I'm not an artist so I'll be using the existing irt.org logo (zoomed to 200%) with Macromedia Fireworks:

2. Choose a URL basic shape tool from the URLs toolbar

The URLs toolbar is located at the top of the main document window:

The four icons from left to right are:

• Show/Hide URL's - toggles the hot spots
• URL Pointer Tool - allows hot spots to be selected and adjusted
• Rectangle URL Tool - creates a rectangle hot spot
• Circle URL Tool - creates a circle hot spot
• Polygon URL Tool - creates a many side polygon hot spot
• Slice Tool - slices images up into may smaller images (not discussed further)

3. Create a hotspot region by dragging a URLs shape tool

I first selected the rectangle URL Tool and dragged a rectangle hot spot over the letter "i":

The four corners of the hot spot can be selected and adjusted once you've selected the URL Pointer Tool. This allows you to refine the hot spot area.

I then used the Polygon URL Tool and clicked the mouse button around the edges or the letter "r" to create several points, before finally clicking the first point to close the shape:

It was then fairly straight forward to repeat this operation over the remaining letters. Note that it is not possible to use the URL Tools to create an area with a concave shape. If this is required then you' would have to make smaller individual hot spots.

4. Choose New Link from the URLs toolbar Options pop-up

First select one of the hot spots, I selected the letter "i". and then select the arrow icon on the far right of the URL Toolbar. A menu is displayed, showing several different options:

Selecting the "New Link..." menu option opens up the "Link Info" dialogue box.

5. Enter a URL to which the hotspot will link, enter a browser status bar message, and enter a target

The Link Info dialogue box allows you to enter the URL to be associated with the selected hot spot, a message text to be displayed in a web browsers status bar, and an optional target (None, _blank, _self, _parent and _top) which refers to the browser window that the URL should be loaded into:

6. Optionally, click the Overlay Color color well and choose an overlay color to organize hotspots by color

The overlay color allows you to see show the different hot spots in different colors - used in Macromedia Fireworks, but not in the final image. Clicking the Overlay Color opens up a typical Color Picker dialogue box (not shown here).

7. Click OK in the Link Info dialog box

Clicking OK completes the setting of the currently selected hot spot:

You can then repeat steps 4, 5, 6 and 7 for all of your remaining hot spots:

8. Selecting the type of image map to generate

We need to select the type of image map to be generated (Client-Side or Server-Side). From the URLs toolbar Options pop-up, select the Image Map Options... menu item:

This then opens up the Image Map Options dialogue box:

This allows you to generate HTML and JavaScript code for a Client-Side image map, or the map file used by a Server-Side image map.

9. Exporting the image and map code

By default Macromedia Fireworks saves your work as .png format files. This allows you to reload and continue your work from where you left off. However, you'll need to export you work to a .gif or .jpg image file and also any additional HTML files. When you select the Export option from the Save As... menu option you'll eventually be presented with the following Export dialogue box. It is important to tick the Generate HTML option box, otherwise any HTML or JavaScript code associated with your Image Map, or Image Rollovers or Sliced Images will not be generated:

This then generates the irt.gif image, along with an irt.htm file containing the HTML and JavaScript code required to operate the Client-Side image map and an irt.map file which can be used on your server to operate the Server-Side image map.

I would also recommend saving your work as a native Macromedia Fireworks .png format file, so that you can rework the image maps that you created later on, without having to manually adjust the generated HTML and JavaScript code.

Working Example

The final result of my work is shown below:

There is one small bugget with the code generated, and that is the small hypertext space visible to the right of the image in some browsers. This is caused by the way the image link is wrapped with anchor tags over three lines. The code Macromedia Fireworks produces is shown below:

<a href="path_to_map_file/irt.map">
<img src="irt.gif" width="170" height="66" usemap="#irt" ismap alt="This is the irt.org logo" border="0" >
</a>

whereas, to avoid this unsightly hypertext link, the code should be produced as:

<a href="path_to_map_file/irt.map"><img src="irt.gif" width="170" height="66" usemap="#irt" ismap alt="This is the irt.org logo" border="0" ></a>

This then avoids the browser including an empty space between the image and the closing anchor tag.

Example Files

Three files can be generated depending on the options chosen from the Image Map Options dialogue box, the .gif image, shown above, the .htm file:

<!-- To put this html into an existing HTML document, you must copy the JavaScript and 
paste it in a specific location within the destination HTML document. You must then copy 
and paste code for the image with map in a different location. -->


<html>
<head>
<title>irt</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="description" content="Fireworks Image Map">


<!-- Copy the JavaScript code including the opening and closing script tags, and paste 
it into the head section of the destination document. If the destination document already 
contains a script section, do not include the script tags when copying. -->

<!---------------------- BEGIN COPYING THE JAVASCRIPT SECTION HERE --------------------->


<script language="JavaScript">
<!--   hide this script from non-javascript-enabled browsers

// function that displays status bar message
var showMsg = navigator.userAgent != "Mozilla/4.0 (compatible; MSIE 4.0; Mac_PowerPC)";
function dmim(msgStr) {
  document.returnValue = false;
  if (showMsg) { 
    window.status = msgStr;
    document.returnValue = true;
  }
}


// stop hiding -->
</script>


<!-------------------------- STOP COPYING THE JAVASCRIPT HERE -------------------------->


</head>


<body bgcolor="#ffffff">


<!-- Copy the image, anchor and map file code, and paste the data where 
you want the image to appear in the destination document. -->

<!------------------------ BEGIN COPYING THE IMAGE AND MAP HERE ------------------------>


<!--   ----------------------------------- NOTE ----------------------------------   --->
<!--   Replace the text in the following HREF tag with the path to your map file's    -->
<!--   location on the server. The "irt.map" file generated by Fireworks needs to be  -->
<!--   placed in a directory with a CGI Application capable of interpreting the Image -->
<!--   Map information. If you are unsure about this, contact your web site           -->
<!--   administrator.                                                                 -->


<!-- Client and Server side image map -->

<a href="path_to_map_file/irt.map">
<img src="irt.gif" width="170" height="66" usemap="#irt" ismap alt="This is the irt.org logo" border="0" >
</a>


<map name="irt">
<area shape="poly" coords="133,5,127,10,123,18,123,28,125,52,132,58,141,60,152,59,160,51,161,40,161,5" href="http://www.irt.org/games/"  onmouseover="dmim('Games at irt.org'); return document.returnValue;" onmouseout="dmim(''); return document.returnValue;">
<area shape="poly" coords="102,4,102,44,114,43,114,17,118,14,124,14,127,6,122,4" href="http://www.irt.org/review/"  onmouseover="dmim('Reviews at irt.org'); return document.returnValue;" onmouseout="dmim(''); return document.returnValue;">
<area shape="poly" coords="76,4,67,11,63,19,62,31,62,43,68,53,75,59,85,61,95,54,100,43,101,26,96,12,90,6,85,4" href="http://www.irt.org/"  onmouseover="dmim('Home at irt.org'); return document.returnValue;" onmouseout="dmim(''); return document.returnValue;">
<area shape="poly" coords="54,4,44,11,43,18,40,18,39,27,44,28,44,54,50,59,58,59,61,58,62,50,54,50,55,27,61,27,61,19,54,19" href="http://www.irt.org/beta/"  onmouseover="dmim('Beta Test at irt.org'); return document.returnValue;" onmouseout="dmim(''); return document.returnValue;">
<area shape="poly" coords="19,4,19,44,30,43,30,24,32,15,41,15,45,6,38,3" href="http://www.irt.org/articles/"  onmouseover="dmim('Articles at irt.org'); return document.returnValue;" onmouseout="dmim(''); return document.returnValue;">
<area shape="rect" coords="6,4,17,60"  href="http://www.irt.org/about/"  onmouseover="dmim('Info on irt.org'); return document.returnValue;" onmouseout="dmim(''); return document.returnValue;">
<AREA SHAPE="DEFAULT" NOHREF>
</map>

<!--   This Image Map was created with Macromedia Fireworks 1.0   -->
<!--   http://www.macromedia.com   -->


<!------------------------- STOP COPYING THE IMAGE AND MAP HERE ------------------------>


</body>
</html>

and an optional .map file:

# This map file needs to be placed on a server in a directory with a CGI
# Application capable of interpreting the Image Map information.  If you
# are unsure about this, contact your web site administrator.


poly http://www.irt.org/games.htm 133,5 127,10 123,18 123,28 125,52 132,58 141,60 152,59 160,51 161,40 161,5
poly http://www.irt.org/review/index.htm 102,4 102,44 114,43 114,17 118,14 124,14 127,6 122,4
poly http://www.irt.org/index.htm 76,4 67,11 63,19 62,31 62,43 68,53 75,59 85,61 95,54 100,43 101,26 96,12 90,6 85,4
poly http://www.irt.org/beta/index.htm 54,4 44,11 43,18 40,18 39,27 44,28 44,54 50,59 58,59 61,58 62,50 54,50 55,27 61,27 61,19 54,19
poly http://www.irt.org/articles/index.htm 19,4 19,44 30,43 30,24 32,15 41,15 45,6 38,3
rect http://www.irt.org/about/ 6,4 17,60



# This Image Map was created with Macromedia Fireworks 1.0
# http://www.macromedia.com

Conclusion

Macromedia Fireworks, is a complicated piece of software. It is a graphics package that enables the easy creation of graphics suitable for the web. It can ease the creation of Image Maps, Image Rollovers and Spliced Images - things which novice web authors find difficult to get to grips with. It is not as sophisticated as Macormedia Dreamweaver, but then it is primarily a Graphics package.

We have only touched the surface on the capabilites of what Macromedia Fireworks can offer, but I hope you can see that it is an extremely professional and capable piece of software.

The Using Fireworks guide included with the CD-ROM is extremly well laid out, with many, mny examples of how to generated images, sitll or animated, concentrating on creating images for a web page. Many of the images are included on the CD-ROM, which will enable you to quickly get up to speed with the tutorials.

Feedback on 'Macromedia Fireworks Image Map Tutorial'

• Macromedia Fireworks Image Map Tutorial - Douglas Albright 16:08:12 3/10/00

View the profile on Martin Webb and the list of other Articles by Martin Webb.