Figure
10
I drew the California shape with the polygon tool.
To close a polygon, double-click on the point where the last line
meets the first line. To move a point, first close the polygon, then
click a point and drag to reposition it.
|  Part 4: Image
Map Tips
- Not
all older browsers support client-side image maps. Navigator 2 or later
and MSIE 3 or later support them.
- You can set both client-side and server side image maps on the
same page. Browsers that support client-side image maps will give
them priority. Older browsers do support server-side image maps; contact your Internet Service Provider or network administrator if you want to use these.
- Be
sure to provide text equivalents for the links in an image map
on the same page or a separate page so that users with low-end
browsers or text-only devices can still get to the information. Yes, use Alt text where you can for each relevant hotspot,
but if at all possible, provide some other table of contents, too. If your user can't click on California, for example, they can't visit it.
- After
you set a link in the image map, make sure the image border is
set to 0, or it will have a visible border in most Web browsers.
Of course, if you want a border, you can set that in the
Property inspector, too. See Chapter 5 for more on image borders.
- To
reposition a hotspot, click on it and drag it to a new location.
- To
remove a hotspot, select the pointer tool (the arrow
on the Property inspector), click on the hotspot in question, then press Delete.
- To
draw a polygon (Figure 10), click at the beginning and
end of each straight line that's a side of the polygon. Double-click
on the end of the final line to close the polygon.
- After
you draw a polygon, you can change the location of points on the
polygon by clicking on the pointer tool and then clicking and
dragging the point. You can do this with rectangles and ovals,
too, to resize them.
The
code for a client-side image map looks like this:
<img src="picture.gif"
width="400" Height="350" usemap="#pict">
<map name="pict">
<area shape="rect" coords="299,93,378,124" href="cumin.html">
<area shape="circle" coords="262,-8,15" href="basil.html"> <area
shape="poly" coords="51,8,117,35,111,145,32,149,100,107,31, 94,83,61,56,44,49,38,49,8"
href="oregano.html">
</map> Note
that you don't need to close the <img> tag, but you
do need to close the <map> tag.
To
delete all the map stuff from an image, just delete the <map>
tags and everything in them. You can select the <map> tags in
the tag selector (in the Document window status bar), or you can
click on each hotspot placeholder and press Delete. |