You are here: irt.org | Articles | JavaScript | Image | Macromedia Fireworks Image Map Tutorial [ previous next ]
Published on: Sunday 3rd October 1999 By: Martin Webb
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:
This tutorial will concentrate on only one of these features...
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.
I'm not an artist so I'll be using the existing irt.org logo (zoomed to 200%) with Macromedia Fireworks:
The URLs toolbar is located at the top of the main document window:
The four icons from left to right are:
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.
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.
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:
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).
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:
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.
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.
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.
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="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/ 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/ 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/ 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/ 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
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.