IMAGE MAP
An Image Map is used when you want to
create "hot spots" within an image and hyperlink to other locations
on the web. By the end of this tutorial you will be able to create
image maps using Front page.
1.
Open up a new document in Front Page.
2. To insert your image, Click on
INSERT => PICTURE => FROM FILE or the Toolbar
 icon.
Browse for your hard drive for the image and click ok when you find
it.
 3.
Bring up your picture toolbar by clicking VIEW => TOOLBARS =>
PICTURE
4. Highlight your image where you
want your image. Click the rectangle tool for a rectangular hotspot,
oval tool for an oval hotspot, or the polygon tool for an odd shaped
hotspot.
5. Using the picture tool, Draw a
 box,
oval or polygon that surrounds the area you would like to hotshop.
6. When you complete the shape, the
Edit Hyperlink box apprears. Type in the hyperlink address you will
like the hot spot to have and click OK.
7. When you have made all your
hotspots and hyperlinks, your image map will look like this:
The code created looks like the
following on the HTML tab.
<map
name="FPMap0">
<area href="imagemap.htm" shape="rect" coords="116, 24, 209,
54">
<area href="garden.htm" shape="rect" coords="84, 60, 213, 92">
<area href="trails.htm" shape="rect" coords="104, 95, 211,
129">
<area href="pond.htm" shape="rect" coords="123, 134, 214,
161">
<area href="plant.htm" shape="polygon" coords="99, 285, 112,
246, 84, 172, 101, 125, 86, 117, 65, 173, 81, 225, 72, 241,
51, 208, 36, 256, 50, 270, 65, 260, 82, 289, 110, 279, 110,
277">
<area href="mailto:ladymindy@developingwebs.net?subject=inquirey"
shape="rect" coords="113, 166, 216, 199">
</map>
<img border="0" src="images/menu.jpg" usemap="#FPMap0"
width="224" height="299" align="left"> |
|
