Designed to a T home

Free clipart, dividers, backgrounds, psp tutorials, and more!
home    |    free graphics    |    psp tutorials    |     web design    |    logo design    |    design tips    |    contact
psp 7 tutorials    |    psp 5 tutorials

Select other psp 5 tutorials from the menu below

Creating Image Maps

When I first started "surfing the net" I was always facinated with image maps. "How did they do that?" I was thinking. Most of the tutorials I found dealt with CGI and I found them very confusing. Here is how to make an image map the easy way: First and foremost you have to create your graphic.

  • Open your image up in Paint Shop Pro.
  • Use the guide below to determine which shape you would like to use as an "outline" to place your HREF link into.

I usually choose the rectangle when making image maps because it is easy to envision a rectangle over the text in your image.
Place your curser over the area in the map where you would like your first x,y coordinate.
In the lower left you will see the x,y numbers displayed. Write this down and continue to your next coordinate.
After defining all the coordinates in your image map, put it all together.

Name your map:

<MAP NAME="imagemap">
(It doesn't matter what you name your map, this is just a reference for the USEMAP command, so name it chickenlips if have an inkling to!)
Plug your coordinates in:
<AREA SHAPE="rect" HREF="linktopage.html" COORDS="12,32 42,89">
Notice you define the shape, then add the link, then insert the proper coordinates.
Below are examples for the other shapes.
<AREA SHAPE="circle" HREF="linktopage.html" COORDS="15,45, 100">
<AREA SHAPE="point" HREF="linktopage.html" COORDS="12,15">
<AREA SHAPE="polygon" HREF="linktopage.html" COORDS="12,55 23,89 134,244 155,266">

(Notice that all x,y coordinates are placed together with a comma and then separated with a space)

Now, add the following code to point to the map
<IMG USEMAP="#imagemap" src="imagemap.gif" border=0 width=200 height=200>
(THIS HAS TO BE THE SAME NAME AS THE MAP NAME ABOVE JUST ADD # IN FRONT OF THE NAME)
Close the command:

</MAP>

Here is the entire map command without all the notes:

<MAP NAME="imagemap">
<AREA SHAPE="rect" HREF="linktopage.html" COORDS="12,32 42,89">
<AREA SHAPE="circle" HREF="linktopage.html" COORDS="15,45, 100">
<AREA SHAPE="point" HREF="linktopage.html" COORDS="12,15">
<AREA SHAPE="polygon" HREF="linktopage.html" COORDS="12,55 23,89 134,244 155,266">
<IMG USEMAP="#imagemap" src="imagemap.gif" border=0 width=200 height=200>
</MAP>

1997-2004 Designed to a T