1. Using your HTML Editor, (I use Notepad) open the file you created using Map This!. The file will look something like this:
   rect http://www.oocities.org/Heartland/5960/florida.html 1,48 99,67 rect http://www.oocities.org/Heartland/5960/16th.html 102,48 199,69 rect http://www.oocities.org/Heartland/5960/navylink.html 203,48 300,69 rect /Research/Triangle/Node/1533/htmlhelp.html 303,49 400,68 rect http://www.oocities.org/ 406,4 463,64 rect /Research/Triangle/Node/1533/index.html 349,33 396,44
2. First change the spaces in the coordinates to commas. It should now look like this:
   rect http://www.oocities.org/Heartland/5960/florida.html 1,48,99,67 rect http://www.oocities.org/Heartland/5960/16th.html 102,48,199,69 rect http://www.oocities.org/Heartland/5960/navylink.html 203,48,300,69 rect htmlhelp.html 303,49,400,68 rect http://www.oocities.org/ 406,4 463,64 rect /ResearchTriangle/Node/1533/index.html 349,33,396,44
3. Next add the HTML tags as shown below:
   <MAP NAME="imagemap1"> <AREA SHAPE="rect" HREF="http://www.oocities.org/Heartland/5960/florida.html" COORDS="2,49,100,67"> <AREA SHAPE="rect" HREF="http://www.oocities.org/Heartland/5960/16th.html" COORDS="102,49,200,68"> <AREA SHAPE="rect" HREF="http://www.oocities.org/Heartland/5960/navylink.html" COORDS="202,49,300,69"> <AREA SHAPE="rect" HREF="htmlhelp.html" COORDS="302,49,399,69"> <AREA SHAPE="rect" HREF="http://www.oocities.org/" COORDS="407,4,465,64"> <AREA SHAPE="rect" HREF="/ResearchTriangle/Node/1533/index.html" COORDS="348,32,398,46"> </MAP> Note that the SHAPE can be defined as SHAPE="rect" or SHAPE="poly".

4. The section of code you have just created needs to be placed somewhere in the HTML file in which you want to use the image map. From habit, I choose to place it at the very top of the file, directly under the tag.

Using the Image Map

To make use of the image map requires an additional attribute to be added to the IMG SRC tag. To insert the image map I have used in this example, I would need to use the tag

<center><IMG SRC="imagemap1.gif" USEMAP="#imagemap1" border=0 ALT="Image Map"></center>

Using this tag, the following image map will appear. You will notice that when you move your mouse over various parts of the image, you can tell where it will link to.

Note: It is very important when using image maps to always provide alternative text links for those browsers that do not support client-side image maps Text links can be placed in another location.

Back

Main HTML Help

Site© 1996-2003 Copyright by dcrum@infionline.net