Web Stuff
Perl/CGI
Imagemaps
Main Menu

How To Make an Image Map

Basics of Imagemap Making

Making an Imagemap is a relativly simple task that adds impact and style to your pages.

A imagemap consists of 2 parts , a graphic and a text doc. with coordinates and assigned urls. To find out the coordinates of your hotspots,you can use a a paint program to get the xy coordinates or a imagemap making program like MapThis 32-bit. MapThis requires a gif as your model , you can either make your displayed image a gif or a jpg (jpg will have to have a gif version for the mapmaker). With this program you will find the coordinate assigning to be a simple step. Note all urls in your map files must be complete urls no relative links allowed. Thomas Boutell's Newest version of MapEdit for Windows 95 This will also support jpgs.

If you choose to use a paint program the coordinates you want for your file are -

  • rectangle upperleft corner of hotspot and the lower right.
    The map file entry- rect: complete-url xy xy
  • Circle the center point and a edge point is needed.
    The entry looks like- circle: complete-url xy xy
  • Polygons you list all the points.
    This would look like this- poly: complete-url xy xy xy xy xy

    Next you will need to assign a url link to your imagemap in your html doc. Most machines will require you to use the server name in the url https://bcpub.com/cgi-bin/imagemap/yourdir/yourfile.

    Well if you have followed these steps you should have an imagemap file up and running.

    Tools For Map Making

    • Thomas Boutell's Newest version of MapEdit for Windows 95 - This version supports the client side imagemaps , and writes the code to your html doc.
    • MapThis 32-bit - Your mapmaker. Needs Windows 95.
    • LviewPro for Windows 95 - 32bit. Graphics program does good clear gifs.
    • Paintshop Pro 32-bit - A full featured graphics program that allows the use of plugins like Kai Power Tools.