Doing Image Maps

<BODY BACKGROUND="/backgrounds/bs.jpg" TEXT="#FFFF00" link="#000000" vlink="#FFFFFF" alink="#FF0000"> <CENTER><B><H2>So you wana have a Image Map in your page?</H2></B> <A HREF="/cgi-bin/imagemap/~timl/timl.map"> <IMG SRC="timl.gif" ismap></A><BR> This page has been accessed  times.<BR> Best experienced with<BR> <a href="http://www.microsoft.com/ie/ie.htm"><img src="/icons/ie_animated.gif"></A><br> Click here to start.</center> <HR SIZE=10> <B><H1>Your Personal WEB PAGE Image Map.</H1></B> <OL>It's a little work but alot of fun to have an image map in your own Web Page.<BR> <LI>First get your page working with an image but no map using<BR> <B><IMG SRC="mypicture.gif"></B> <LI>Upload in ASCII mode your page and the GIF image in BINARY to your personal <i>public_html</i> directory. <LI>Test it, making sure all '<' and '>' are matched and the picture looks good. <LI>Download (If you already don't have it) <BR> For Windows <A HREF="ftp://sunsite.unc.edu/pub/packages/infosystems/WWW/tools/mapedit/mapedit.zip"> mapedit.zip</A><BR> For MAC <A HREF="http://www.city.net/cnx/software/webmap2.0b9.sea.hqx"> webmap2_0b9_sea.hqx</A><BR> <LI>Unzip (PC) or un-MAC-whatever (MAC). <LI>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. <LI>Verify your map file:<BR> First line should be default URL (If they click on anything but what you want them to.<BR> Next lines ahould be your hot spots.<BR> See below for example. <LI>Upload your map file in ASCII mode with an extention of '.map'. <LI>Add the call to <B>imagemap</B> and <B>ismap</b> to your image statement<BR> <B> <A HREF="/cgi-bin/imagemap/path/mypicture.map"><BR> <IMG SRC="mypicture.gif" ISMAP><BR> </A><BR> Where <I>path</> points to your map file. (This may include ~username to point to your home directory.<BR> Where <I>mypicture.map</I> is the name of your map file.<BR> Where <I>mypicture.gif</I> is the name of your picture file.<BR> </B> <LI>Click away and see if it works. </OL> Sample MAP file<BR> <PRE> 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 </PRE> 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.<P> For more <A HREF="http://wintermute.ncsa.uiuc.edu:8080/map-tutorial/image-maps.html"> information </A>give NCSA a try.<BR> Now tell all your friends about your cool web page.<BR> <HR SIZE=2><CENTER> <A HREF="pictures.html"> Pictures in Pages </A> - <A HREF="counter.html"> Access Counter </A> - <A HREF="mailback.html"> Mail Back Form </A> - <A HREF="webpages.html"> Your Web Pages </A> - <A HREF="index.html"> Tim's Home Page </A> </CENTER><HR SIZE=2> <CENTER><FONT SIZE=1><A HREF="http://www.instanet.com/">InstaNet</a>, Instant Internet Corp., 21010 Devonshire, Chatsworth, CA 91311, (818) 772-0097 Voice, (818) 772-0099 PPP 28.8<FONT SIZE=2></CENTER> <HR SIZE=2> </BODY>