How Do I Map My Site To an Image?

Well, this isn't a question that is actually asked too frequently, but I only managed to come across one tutorial when I wanted to know how, which was vague and filled with awful terms that I'm sure the guy who wrote it only threw in to make himself sound smart. It took me an hour to decipher. So I've decided to make my own contribution to the world of html tutorials. Four easy steps to making an image map.

Step One: Make a dir in your images dir called cgi-bin and put a copy of the image you want to use, reneming it to ***.map (***=your images name)

Step Two: Add the following code to the page you want the map to appear:

<map name="***">   <div id=aws_6186 align=center> <table cellpadding="0" cellspacing="0" style="margin:0 auto;"> <tr> <td width="130" class="mwst" style="vertical-align:top; padding:5px 15px 5px 0;"> <a href="http://20m.com/?refcd=MWS_20040713_Banner_bar"> <img src="/cgi-bin/image/images/bannertype/100X22.gif" width="100" height="22" border="0" /> </a> </td> <td width="130" class="mwst" style="padding:10px 0 10px 10px;"> <div align="right"> <a style="padding:5px 15px; color:#FFF; font-size:14px; display:block-inline; background-color:#166DC2; border: 1px solid #166DC2; border-radius:4px;" href="/cgi-bin/login" target="_blank">Sign In</a> <a style="font-size:14px; color:#41c5e4;" href="/cgi-bin/path/signup?refcd=MWS_20040713_Banner_bar">Sign-Up</a> </div> </td> </tr> <tr> <td colspan=2 class="mwst" align="center" style="width:730px;"><SCRIPT></SCRIPT><NOSCRIPT><IFRAME src="http://flyingsaucerfactory.20m.com/cgi-bin/ad/inline?page=what2.html&pb=1&w=728&h=90&Rtime=4074" width="728" height="90" hspace="0" vspace="0" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" allowtransparency="true"></IFRAME></NOSCRIPT> </td> </tr> </table> <DIV id="setMyHomeOverlay" align="left" style="position:absolute; top:25%; left:25%; width:358px; border:1px solid #AEAEAE; background-color:white; z-index:200000; display: none;"> <div style="height:59px; padding-left:22px; background:white url('/cgi-bin/image/images/sethome_top_border.gif') repeat-x;"> <div style="float:left; width:182px; height:35px; margin-top:12px; font:bold 38px arial,sans-serif; color:#454545"> Welcome! </div> <div style="float:right; padding:6px 5px 0px 5px;"><a href="#" onclick="javascript:do_set_homepage('close'); return false;"> <div style="background:url('/cgi-bin/image/images/sethome_x.gif'); width:21px; height:21px; cursor:pointer;"></div></a></div> <div style="float:right; font:bold 12px arial; margin-top:10px;"><a style="text-decoration:none; color:#004182;" href="#" onclick="javascript:do_set_homepage('close'); return false;">Close</a></div></div> <div style="height:170px; background:#ffffff;"> <div style="padding:30px 20px 0px 20px; font:normal 14px arial; height:80px;"> Would you like to make this site your homepage? It's fast and easy... </div> <div style="padding:10px 0 0 41px;"> <div style="float:left;cursor:pointer; background:white url('/cgi-bin/image/images/sethome_btn_l.gif'); width:4px; height:26px;" onclick="javascript:do_set_homepage('do');"> </div> <div style="float:left;cursor:pointer; background:white url('/cgi-bin/image/images/sethome_btn_m.gif') repeat-x; width:265px; height:26px; text-align:center; font:bold 13px Arial; color:#FFFFFF; line-height:25px;" onclick="javascript:do_set_homepage('do');"> Yes, Please make this my home page! </div> <div style="float:left;cursor:pointer; background:white url('/cgi-bin/image/images/sethome_btn_r.gif'); width:4px; height:26px;" onclick="javascript:do_set_homepage('do');"> </div></div> <div style="padding-left:148px; padding-top:7px; clear:both; font:normal 12px arial;"><a href="#" style="text-decoration:none; color:#004182;" onclick="javascript:do_set_homepage('close'); return false;">No Thanks</a></div></div> <div style="height:36px; background: white url('/cgi-bin/image/images/sethome_bot_border.gif') repeat-x;"> <div style="float:left;margin:12px 0px 0px 20px; line-height:10px;"><input type="checkbox" style="width:11px; height:11px;" onclick="javascript:do_set_homepage('dont');"></div> <div style="float:left;font:normal 12px arial;padding:10px 0 0 2px;">   Don't show this to me again.</div> <div style="float:right; padding:6px 5px 0px 5px;"><a href="#" onclick="javascript:do_set_homepage('close'); return false;"> <div style="background:url('/cgi-bin/image/images/sethome_x.gif'); width:21px; height:21px; cursor:pointer;"></div></a></div> <div style="float:right;font:bold 12px arial; margin-top:10px;"><a style="text-decoration:none; color:#004182;" href="#" onclick="javascript:do_set_homepage('close'); return false;">Close</a></div></div></div> <span ID="mws_oHomePageOverlay" style="behavior:url(#default#homepage); display:none;"></span> <script src=/fs_img/js/overlay.js></script><script defer="defer" src=/fs_img/js/set_homepage.js></script></div> <a href="/cgi-bin/***.map"> <img src="images/map.jpg" usemap="#***" width=180 height=400 border=0 ismap></a> (you know what the *** mean, width and height are set to what you want)

Step Three: Below this code is where you need to add the coordinates for the html documents you wnat linked to the image. This takes a little while, but it's easy. basically you have to divide the map up into sectors of x,y using two sets of vaues, one to plot the beginning of your link and the other to plot where it ends.(x,y x,y) So if your link starts at 1,1 and ends at 179, 26 the first line of code would appear like so:

<area shape="rect" href="***.html" coords="1,1 180,26"> Carry on in this manner until the whole image, or whatever part of it you want plotted are complete.

Step Four: End the code with the line

</MAP>

That's it, I hope you get it.

Sample code: This is the code that I used to map the image on my site:

Click your heels to go home