How To Make an Imagemap

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. 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 This will also support jpgs.

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

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. Now lets look at something new in imagemap server programs.


Advanced Imagemaps using Mapper 1.2

Mapper 1.2 is a server .c script replacement for the standard imagemap program on most servers. With Mapper 1.2 you have the ability to use a wildcard in your map file. This would allow you to use the same map for different pages. your map file entry can look like this .
rect https://bcpub.com/%s 120,200,300,400 The %s is used as the wildcard.
The url in your pages would look something like this
https://bcpub.com/cgi-bin/imagemap2/yourpath/mapfile/goto.html goto.html is pluged into where the %s is located. The program will only allow you to call up one variable, per use. Imagemap2 of course fully supports regular imagemap file entries , so it is fully compatible. Now look at the examples both use the same map file but the hotspots take you to differnet urls

Example 1


The Url for example 1 is https://bcpub.com/cgi-bin/imagemap2/manual/testmap.map/test1.html the test1.html is the variable.

Example 2


The Url for example 2 is https://bcpub.com/cgi-bin/imagemap2/manual/testmap.map/test2.html the test2.html is the variable.

The map file for both these examples is

     default https://bcpub.com/manual/testmap.html#test1
     rect https://bcpub.com/manual/%s 10,7 255,109

Maps in HTML3

Imagemap files now can be put on the html doc. The great benifits with this are the ability for the client to see the url of the link instead of the map file , the increase in speed ,reduced server demand , and the abilty to give targets to individual tags.

Thomas Boutell's Newest version of MapEdit for Windows will do the dirty work for you and write the code to the html doc for you. The map is called by putting usemap="#name of map" within the img tag. Somewhere on the page the map file can be placed. The tag for the map file is < map name="name of map">

The page with map file looks like this
< img src=" html3map.gif" border=0 usemap=" #html3map" >

< map name=" html3map" >
< AREA SHAPE=" rect" COORDS="13,13 197,38" HREF=" html3test1.html" >
< AREA SHAPE=" rect" COORDS="219,11 430,39" HREF=" html3test2.html" >
< /map>


Basically that is it, Please give it a try.


Tools For Map Making


| Our Site Manual | Html and Web Authoring Tools Page | B.C.'s Home |