Making an Image Map

  1. Download a free image from one of the graphics sites listed in Slator's Useful Links.
  2. Visit the Image Map tutorial site at ConceptCorp
  3. Use an editor like Notepad to create an html file
  4. Type or copy this code into your html file:
    
     <HTML>
     <HEAD><TITLE>your title here</TITLE></HEAD> 
     <BODY>
     <MAP NAME="menu">
     <AREA SHAPE="RECT" COORDS="98,14,161,33" HREF="index.htm">
     <AREA SHAPE="RECT" COORDS="15,54,114,71" HREF="software.htm">
     <AREA SHAPE="RECT" COORDS="82,90,194,106" HREF="resources.htm">
     <AREA SHAPE="RECT" COORDS="16,130,127,147" HREF="bookstore.htm">
     <AREA SHAPE="RECT" COORDS="92,175,160,191" HREF="mailto:your email address here">
     </MAP>
     <IMG SRC="yourimage.gif" USEMAP="#menu" WIDTH="200" HEIGHT="212"  BORDER="0">
     </BODY>
     </HTML>
     
  5. Use Photoshop or a Map Editor to get your (x, y) coordinates.