| When you open Fireworks you will be
told how may days you have remaining on your examination copy of the program.
If you do not finish your image map assignment before your examination copy expires, you
will have to use some other software to complete your image map, (such as MapEdit). Open the file
shapes.gif you had
previously saved, as part of the
Image Map Tutorial Setup. |
|
| Select the Rectangular Hot
Spot Tool from the toolbar (see mouse cursor in the adjacent
image.) Once the Hot Spot tool is selected the cursor becomes a
cross. Position this cross hairs over
the top left corner of the rectangle, press and hold the left mouse button,
as you drag the cursor down to the right to enclose the rectangle, in the
shade color, (blue by default). |
|
| After dragging down the rectangel,
release the mouse button and you should see the Object Hot Spot window,
the window at the bottom of the screen capture to the right. Enter your file named: rectangle.htm
(Note, I'm assuming rectangle. htm file is in the same folder, as your image, and
you have named the file exactly as I have it spelled above. i.e. no captial letters,
ends in .htm not .html etc.)
It is good form to always include alternate
text, when pictures are displayed, so enter in the box labeled <alt>
some text message such as: "Blue Rectangle".
You can ignor the target box for now, that is used
for pages included within frames. |
|
Change the Hot Spot selection tool for
selecting Circular hot spots.
- Mouse click on the rectanglar tool.
- Hold the mouse button down, and drag over to the
circle shape, then release the mouse.
|
|
| It is a little more difficult to make
the circle hot spot overlap exactly your circular image. Mouse click a little over
the circle, then drag the mouse across the circular image. Practice selecting the circle using the undo key
where you were really off, the mark, although your shaded hot spot doesn't have to match
the circle exactly, you can move the hot spot to cover the circle, as illustrated in the
next step. |
|
| Once your shape is approximately the
correct size. Mouse click outside the image, then select the solid arrow
(selection tool) from the toolbar. Position
the arrow over the shaded hot spot area, mouse click and drag the image
to where you want it located. |
|
| Fill in the URL file name in the link
box as you did with the rectangle, except this time enter file name: circle.htm Place some appropriate message in the <alt> box. |
|
| Change to polygon hot spot
tool, as you did with the circle, except select the polygon shape, as illustrated
in the graphic to the right. |
|
| Mapping out a polygon hot spot is slightly
different than the circle and rectangle, in that you do not hold and drag
the mouse to select the shape. To outline an irregular shape, once the
plolygon hot spot tool has been selected, you mouse click on points within the image,
in orderly steps, where the last point will be where you started the first point. |
|
| Here we see the plolygon shape
completly connected. Crosshairs marking the last point coincide with the first
point. |
|
| As you did with the circle and
rectangle, fill in the URL file name in the link box, using this time file name: polygon.htm Place some appropriate message in the <alt> box |
 |
| Fireworks will create the html
file automatically, defining the image map, and hot spot areas you have
selected. To save the html code use
the File Export main menu option.
In this example, a file name shapes.htm
which uses the image shapes.gif is saved in my folder images that contained my original
image shapes.gif. |
|
| When you see this alert box just click
the OK button. |
|
| Adding Your Name to
the image map file your've Created: I've
Loaded the file just created shapes.htm, into arachnophilia to view
the work produced by Fireworks.
The only code I had to include in the file automatically created by Fireworks was the
line:
<h1>Linda's Shapes Image Map</h1> |
|
| Here is the page viewed in a browser
window. With the mouse over the polygon shape you can see the alt tag text
displayed. You can edit this web page,
inserting code that doesn't interfer with the image map code.
Creating Image Maps using Fireworks is very easy
once you get the hang of it. I hope you have fun playing with it. |
|
