Full Image Map Example

Try it out by clicking on the text ("Click!, "Let's go!", and "Home!")

The coding for this Image Map (the link names, the image name and the description area are replaced):

<map name="map1">
<area shape="circle" coords="183,176,22" href="link101.html">
<area shape="rect" coords="48,320,121,345" href="link102.html">
<area shape="rect" coords="243,320,306,345" href="link103.html">
<area shape="default" nohref>
</map>
<img src="YourImage.gif" border="0" usemap="#map1" alt="Put Your Text Here." width="354" height="450">

The red letters show some fake links. That's where you'd put your links, if you were using this Image Map. You can get the coordinates of any image by using Paint Shop Pro, or another Graphic Program.

If you have a cool image that you'd like to convert into an image map, but you don't have Paint Shop Pro and you are desperate, then fill out the feedback form, or e-mail me and I'll help, if I have enough time. Alternatively, you can get an Image Mapper (divides your image into different areas, each linking to a different page) for free here!

Study the coding of this image map once you read the tutorial, and you'll be able to create your own.

Tutorials