|BreBru's Art Room|
IntroductionI know that there are a large number of image map tools that will automatically generate the correct code for you to create image maps. Many of them can be downloaded for free but the better ones do cost money. Building the maps by hand is not, however, a money saving effort but a method for keeping better control of your web pages.
Once you have the basics, creating image maps by hand is really
not that much more difficult than by the automated method and you
have complete control over all the steps. The key is a bit
better note taking and a clear idea of what is supposed to happen
when the user clicks on an "active" area of your image.
Step 1: Build the imageTo illustrate the use of image maps I am going to use the splash screen for this site which is set up as an image map. I placed the "table of contents" over to the lower left and this is the only area of the screen that will have "active" spots. Logically enough, if the user clicks on one of the items the code will call up the appropriate web page.
The image is basically a digital photograph that has had some editing
to remove a small well house and barb wire fence and then the text
has been placed on top. The main title uses the techniques
outlined in the Cutout Text Tutorial also available at this site.
Step 2: Understanding X-Y coordinatesThe computer screen is composed of "dots" in a grid with the grid size (640 x 480 for example) indicating how many dots or pixels (picture elements) there are horizontally and vertically on the screen. Therefore every position on the screen can be located by its X or horizontal, and Y or vertical position.
Step 3: Use the mouseWith the image loaded into PSP5 (or just about any other graphics program for that matter) I can move the cursor to the upper left hand corner of the first item in the contents list. If you look down at the lower left hand corner of PSP5 as you move the cursor you will see two numbers constantly changing. These are the X and Y coordinates of each pixel that the mouse pointer passes over.
We will be defining "rectangles" as active areas that the user can click on and a rectangle is defined by locating its upper left corner and its lower right corner. Once you have those two coordinates the computer can always know if the mouse has been clicked within those boundaries.
I get the mouse pointer to the spot just above and the to right
of the first item I can read off that location at the bottom of
the screen, in this case (20,285). I can then move the mouse over
to the lower right hand corner and do the same thing.
time when I read off the coordinates they are (235,314). In
this case you will note that I have gone out as far as the widest
text element. I've done this to make life a bit easier.
For all other coordinate sets I will now have a left horizontal
setting of 20 and a right horizontal setting of 235, the only
thing that will change is the vertical locations and I try to get
them as regular as possible too.
Step 4: Write down all the coordinates
Now you move through each of the items in the content list recording
the upper left and lower right coordinates. In each case this
is an X-Y pair, how far horizontally, in pixels, from the
left side of the screen and how far down from the top of the screen
(the upper left corner of an image is position 0,0). For use
in the necessary HTML code each pair of numbers is grouped together
so you get a listing like this:
Animated HTML: 20,315,235,339
Farm Photos: 20,340,235,364
Graphic Experiments: 20,365,235,389
Step 5: Check the numbersThough you will not get a disaster if you define intersecting rectangles it is best not to confuse the browser. Therefore set up your numbers so that each rectangle is separate from the others with the next lower Y coordinate at least 1 pixel larger than the bottom right Y coordinate of the item above.
Step 6: Looking at the code:Here is the code that displays the main menu for this site:
<BODY BGCOLOR="#FFFFFF" >
<AREA SHAPE="rect" COORDS="20,285,235,314" HREF="fineart/intro1.htm">
<AREA SHAPE="rect" COORDS="20,315,235,339" HREF="anhtmidx.htm">
<AREA SHAPE="rect" COORDS="20,340,235,364" HREF="farmphot.htm">
<AREA SHAPE="rect" COORDS="20,365,235,389" HREF="grexperm.htm">
<AREA SHAPE="rect" COORDS="20,390,235,429" HREF="scptutor.htm">
<Center><IMG SRC="mainidx.jpg" USEMAP="#menu"
WIDTH=598 HEIGHT=440 ALT="click on options bottom left" BORDER=0
Step 7: The MAP tagThe MAP tag, like most HTML tags is a container so you need the opening <MAP > and the closing </MAP>. If you have created an image map and it isn't working one of the most common errors is to have forgotten the closing </MAP>.
<MAP> takes one required element, the NAME property, which
gives the browser the location in the HTML code for the active areas.
You MUST have a NAME defined and get into the habit of always typing
it in lower case. Another very common error which will cause
the image map to fail is to have a difference in case between the
map definition (in our example "menu") and where the property is
put to use by USEMAP (say perhaps, "Menu"). The property used
must be exactly the same in both locations.
Step 8: The AREA tagThe AREA tag is the heart of an image map. This is what tells the browser where the active areas are in the image. The SHAPE property, as well as "rect" for rectangle, can define circles and polygons but that is another discussion. The COORDS property contains the two pairs of X-Y coordinates that define each rectangle, placed between quote marks. This is another potential problem area when creating image maps. If you forget an opening or closing quote mark in any of the sets the image map won't work, so check carefully.
Finally the HREF (hypertext reference) which you have seen before
with the Anchor tag, defines which document or image the browser
is to select when the area is clicked on. Again the quotes
are crucial and forgetting one will shut down the image map.
Step 9: The USEMAP propertyTo actually put the image map to work you add the USEMAP property in the IMG tag itself. The IMG tag calls up the image, places it on the browser's screen and then stores the active areas in anticipation of a mouse click. Similar to within document hypertext jumps, or bookmarks, USEMAP requires the use of the "#" to jump to the map coordinates based on the indicated name in quotes.
Step 10: Try it outThere, that is it. 8 maybe 10 lines of code, a bit of work with the mouse, some careful recording of coordinates and the job is done. Do one of your own, or download my main image and do the work just to check out the process (create dummy files to jump to). Once you have completed it successfully, being able to check back with the correct code, then you can start your own. Some final pieces of advice: