So you wana have a Image Map in your page?


Your Personal WEB PAGE Image Map.

    It's a little work but alot of fun to have an image map in your own Web Page.
  1. First get your page working with an image but no map using
    <IMG SRC="mypicture.gif">
  2. Upload in ASCII mode your page and the GIF image in BINARY to your personal public_html directory.
  3. Test it, making sure all '<' and '>' are matched and the picture looks good.
  4. Download (If you already don't have it)
    For Windows mapedit.zip
    For MAC webmap2_0b9_sea.hqx
  5. Unzip (PC) or un-MAC-whatever (MAC).
  6. Using your new found friend (program) create areas on your GIF that you want people to click on. You can create rectangles, circles and polygons. Enter a URL for each. Enter a default URL if they click on anything else.
  7. Verify your map file:
    First line should be default URL (If they click on anything but what you want them to.
    Next lines ahould be your hot spots.
    See below for example.
  8. Upload your map file in ASCII mode with an extention of '.map'.
  9. Add the call to imagemap and ismap to your image statement
    <A HREF="/cgi-bin/imagemap/path/mypicture.map">
    <IMG SRC="mypicture.gif" ISMAP>
    </A>
    Where path points to your map file. (This may include ~username to point to your home directory.
    Where mypicture.map is the name of your map file.
    Where mypicture.gif is the name of your picture file.
  10. Click away and see if it works.
Sample MAP file
timl.map

	default http://www.instanet.com/~timl/default.html
	poly http://www.instanet.com/~timl/m.html 1,76 38,2 58,43 87,3 112,55 100,77 
	poly http://www.instanet.com/~timl/a.html 101,75 135,6 159,62 159,76 
	poly http://www.instanet.com/~timl/p.html 158,75 158,6 171,7 221,17 174,42 173,75 173,77 

Just in case you have not already tried, the strange picture at the top of this page is an image map and you can click on things in it.

For more information give NCSA a try.
Now tell all your friends about your cool web page.


This page has been accessed times.
Best experienced with

Click here to start.