How to Code an Image Map Layout with Notepad

No need for any fancy HTML software--your simplest text editor will do just fine.

Step 1. Open a new file in your text editor.

Step 2. Copy and paste the following code into your file:

<map name="map">
<area shape="rect" coords=" " target=" " href=" " alt=" " title=" ">
</map>

Some explanations:

• The "area" tag is what makes a word in your layout clickable (makes the image map work).
• The "shape" attribute can be a circle or a rectangle--let's stick with rectangular for right now, since you're using words.
• The "coords" blank is where you put those coordinates you copied down from MS Paint, in the order of top left, bottom right.
• The "target" attribute can make the link pop up in a new window ("_blank"), in the same window ("_top"), or in a frame/iframe ("NAME OF FRAME OR IFRAME HERE").
• The "href" attribute is where the actual link for the image map goes.
• The "alt" and "title" blanks are where you can describe what the link is about.

(Also, you can name the map anything you want to---I just usually name mine "map" because it's easier to remember.)

Step 3. Now, count how many links your image map needs, and copy-paste the entire "area" tag as many times as you need to match the links you need.

Step 4. Fill in each of the URLs for the image map links in the quotes following the "href" part of each area tag. Also, fill in the descriptions for each link in the "alt" and "title" blanks, just so you don't confuse yourself later about which link is which.

Step 5. Open the file that contains all your coordinates for your image map, and start plugging in each of the sets of coordinates that match each of the links. You should have four numbers for each link, formatted as such: "98, 254 109, 267".

(The space between the second and third numbers is for the web browser to recognize the difference between the top left coordinates and the bottom right coordinates.)

Step 6. When you're done plugging in all the coordinates, put your choice of targets in the target=" " blank.

(Most likely, you're using this image map for an iframe layout or a table layout. In the first case, you will need to use whatever you called your iframe or frame, and in the second case, you will need to use target="_top" and repeat your image map info (as well as the rest of your layout) on every page of your site.)

Step 7. Click "Save As..." and type in whatever name you want for your main page. However, type the filename as "whatevername.html," not "whatevername.txt." DON'T HIT SAVE YET! Go to the "Save As Type:" dropdown menu box (right below the filename entry box), and choose to save the file as "All files." THEN hit "Save As."

{The little "Save As Type" trick lets Notepad know that you are making a different kind of file, so the program will save your file correctly---not as a ".html.txt" file, but as a true HTML file. If you forget these steps and it screws up the file type, don't worry---just copy and paste all your code into a new Notepad file, and save the file again, being sure to make the file extension ".html" and to choose "All files" for the "Save As Type" dropdown box.)

Step 8. Now, above your image map code, copy and paste the following line of code:

<img src="YOURIMAGENAMEHERE.jpg" border="0" usemap="#map">

The "usemap" part of the "img" tag is what alerts the browser that you're even using an image map. Without this part of the tag, all the image map code you just worked on will not work. Fill in the name of your image and its file type (it will probably be either ".jpg," ".gif," or ".bmp" for your image file), and you have your image formatted for the image map.

And guess what? You are now DONE with the image map code! Now you can plug in all the stuff for your layout and everything else, as well as the other bits of HTML you need to display your page correctly.

Step 9 (EXTRA): Click this to see the image map layout I created for the purpose of this tutorial. In this example, I used divided layers (also known as "divs") to make my layout---you may right-click and select "View Source" to see my code for more helpful hints on how to make your page work.