Image Maps

Image maps are an attractive way to arrange links to sections of your website. The first step is to make an appropriate image for that like this example shown below.

Once you have your image made, you have to record the coordinates of the areas on the map, for example the coordinates for the "midi" area in my sample map are 12,8,75,34. To do this you must open the image in your Paint Shop Pro, Adobe or LviewPro. Put the curser on the upper left corner of the area you need, your graphics program will have numbers on the bottom toolbar telling you which pixel the curser is on, write those down. Then move the curser to the lower right of the area you want. Write down those numbers. These four numbers map out a rectangular clickable area on your image map.

Continue to record the coordinates for each of the areas you wish to make clickable on your image map. Make sure none of the numbers overlap. When you are done, record the numbers of the entire image, the first two numbers will be 0,0 and the next two numbers will be your image size--in my example 308,68.

Putting It All Together

Now you must go to your html file. You have to make a code fragment that goes at the beginning just after the <body> tag just like this one below, if you wish you may just copy this one and insert your own map name, coordinates and files.

<map name="examplemap">
<area shape="rect" coords="12,8,75,34" href="midi_netscape.html">
<area shape="rect" coords="83,8,218,34" href="codes.html">
<area shape="rect" coords="228,8,298,34" href="links.html">
<area shape="rect" coords="44,36,139,63" href="java_links.html">
<area shape="rect" coords="160,36,292,63" href="images_tables.html">
<area shape="rect" coords="0,0,308,68" nohref>
</map>

This is showing that the area shape is rectangular (the easiest to work with in my opinion) the coordinates and the links. You may link off site, too, just use the usual URL between the href= quotation marks. The final code which shows the coordinates of the whole image with nohref just makes sure that the areas that have been left open aren't clickable. Make sure not to leave spaces in the coordinates, just numbers with commas between.

Once this code is in place you may place your image, or images if you wanted to put more than one map, anywhere on the page using this code:
<IMG src="imagemap_example.gif" width="308" height="68" border=0 alt="example" USEMAP="#examplemap">
Just like any other image except you must have the USEMAP="#what ever you named your file". You only need the one fragment code.

There, my map is now ready, go ahead and try it.
example

Back to HTML Help Index | Template
Tips | Backgrounds | Graphics