Developing Webs logo
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions
RSS Newsfeed
for your site
DW News
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Remember to book mark this site!

Request a Tutorial



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="" shape="rect" coords="113, 166, 216, 199">
<img border="0" src="images/menu.jpg" usemap="#FPMap0" width="224" height="299" align="left">


"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2018 All Rights Reserved
Privacy and Legal