 Learn
To Draw |
Learn
To Paint |
Photoshop
Elements |
Animation
Menu |
Art
Principles |
Art
Appreciation |
Introduction
I 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 image
 To 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 coordinates
The 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 mouse
 With 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.
 When
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.
 This
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:
Fine Arts 11:
20,285,235,314
Animated HTML:
20,315,235,339
Farm Photos:
20,340,235,364
Graphic Experiments: 20,365,235,389
Tutorials:
20,390,235,429
Step 5: Check the numbers
Though 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:
It doesn't seem fair does it? It ought to be more complicated,
after all everybody uses automated image map programs if they can
get ahold of one! But that is the point, you can automate this
process because it is basically simple, the problem with the automated
methods is that far too often they want to toss in their own code
snippets, conditions and advertising, right within your web page.
Step 7: The MAP tag
The 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 tag
The 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 property
To 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 out
There, 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:
- Put the <MAP> coding right after the <BODY> tag
in a document even if the image is not used till much later in
the document. If you have several image maps in a single
document, put all of the <MAP> codes one right after the
other. This gives the browser more time to digest the information
and is easier for debugging.
- For some reason the <P> tag can cause problems at least
in Netscape. Therefore if you have an image map coming
directly after a block of text defined with the <P> (paragraph)
tag, make sure that there is a closing </P> tag, this seems
to solve the problem.
- Type the AREA tags so that everything lines up as you see above,
you may need to put in some spaces if there are 2 and 3 digit
numbers intermixed, however it means that it is very easy to check
all the elements to make sure spelling, quotes and brackets are
correct.
- Another very common error that will shut down an image map is
to miss one closing ">" just about anywhere in the document.
Have fun, you have taken one more step towards freedom! |
BreBru.com