Introduction to Fireworks - Image Maps and Hotspots

In this tutorial we will look at creating Image maps. If you have been through the Dreamweaver Training, you will notice that this is a similar technique to the Image mapping shown there, and is an alternative method to using Fireworks. Firstly download the working files that accompany this tutorial from the main menu, unzip them and go to File > Open... then go to the next step...

Locate the file duck.png from wherever you unzipped the downloaded folder, click once on the file and then click OK.

Once opened your document window should look like this, now we can begin the Image map process.

To create an Image Map we have to use the Web tool from the Tool panel on the left of the screen. The Web tool is different from all the others in that its function is invisible to everyone apart from you, the developer. The Web tools allow us to add interaction between the image and the end user via a web page. As we move through this tutorial you will discover we create more than just an image, and moving to the button tutorials we will use this Web tool panel more. Click on the Hotspot tool to continue.

Web tools

Hotspot tool

The Properties bar at the bottom of the screen will change contextually for the Hotspot tool, and as you can see you have a limited number of options. A Hotspot is an area on screen that can be linked to a document, give the user some information, or trigger an email. It is created by adding a shape over the image where the interaction will occur. You can choose between a Rectangle shape, Oval or Polygon. Polygon allows for the most precise shape selection so we will use that one. Select Polygon from the drop down box.

Hotspot Polygon tool

With the Polygon Hotspot tool selected move your mouse over to the image and begin creating a Hotspotover the body of the duck. The technique is click once and release the mouse button, move to the next spot and repeat until you have gone around the area to be activated as shown in the pictures here. In this example I have drawn around the body but missed out the bill so you can have another go at a tighter Hotspot. Don’t worry if it gets a little messy keep going, remember no one else will ever see this.

Once completed it should look something like this. You will also notice that you have activated the invisible Web Layer in the Layers palette. This indicates that the Web tool is being used and allows you to add interaction and programming here.We are going to use the simplest form of interaction here - Alt text . W e will add more complex interaction later in the buttons tutorial. Click on the Alt text box and add some text to describe the Hotspot

Web Layer

Alt text box

Have another go, selecting the Pointer tool or black arrow to end the previous Hotspot selection then move to the Hotspottool again, select the Polygon shape from the drop down box and draw around the bill.

Pointer tool or black arrow tool

Hotspot tool

Selecting the Pointer tool again, click once on the new hotspot area and enter a different line of text in the Alt text box. Now all that is left to do is to save and export.

Pointer tool or black arrow tool

Alt text box

First of all save the development version of the file or the PNG formatted file, so we can make intricate changes later that cannot be made on the web ready formats. Click File > Save As...

Save the PNG file or development file outside of the web folders, if you are currently working on a website. Give the file a useful name and click Save.

Now we are going to create the web ready version. If you want to optimise your picture do this now, see the optimise your work tutorial for details on this technique. Otherwise click File > Export...

We mentioned earlier that when you activate the Web Layer you create more than just an image. In the Export box you have to be careful the Web Layer indicates to Fireworks that you have added some interactivitythat should be placed on a web page, and for this reason, Fireworks will create a web page, place the image on it and add the interaction around it for us. This can then be edited and customised further in Dreamweaver. to do this the Export box asks you to save the web page first. If you are working on a website locate the HTML folder for the web page and entera useful name in the File name box.

Then check the Put images in a subfolder check box, and click the Browse... button.

Fireworks now asks you to tell it where the images folder is located, then click on the Select "images" button at the bottom of the box.

Finally click Save, and Fireworks will do the rest. Nowgo to the final step to admire your work...

this is a red bill

Open your web browser and go to File > Open . Locate the HTML web page saved along with the images and click Ok to open it. This is the completed Image map, roll over the different parts you selected with the Polygon Hotspot tool and you should notice text appearing next to your mouse.This web page can now be opened in Dreamweaver or any other web page creation package for further customisation or to add links. Now select another option from the main menu.

Close this window by clicking on the cross to go back to Fireworks.