Note: You are here for the tutorial so all links
above on the map lead here!
Look up! There it is- the image map. The image is a rather
standard transparent GIF file offering the usual site navigation
choices. Image maps have their ups and downs. On the up side they
can be very attractive. On the down side they can be overly
large, not clear in their meaning, and downright ugly.
If you feel that using image maps is not for you, or not for
you yet, please visit
the Navigation Devices Page for
some nice alternatives.
There are a couple of things to go and do before you get
started. The first is to
download MAPTHIS This is a great program for creating the files
you will need to make an image map. The other thing you need to
do is contact your system administrator to find out the following:
Is your server APACHE/NCSA or CERN.
What is the actual directory you put the map file in,
and what is the URL to refer to it by.
Overview
There are in fact two major types of Image Maps:
Server Side: This is the older method of doing image
maps. The reason for finding out what type of server you are
on is so you know what format to make your map files in.
Client Side: These maps are implemented by placing
the map coordinates in your document's HTML code. This
method is supported by most modern browsers. It is much
more efficient than the Server Side map in that you
do not transmit mouse coordinates back to the server. Most
of this page will be dealing with this type of mapping.
To keep things simple, we will be dealing with rectangular areas
within an image. You are not limited to box shapes for your map
areas. Circles and complex shapes are also supported. We consider
this a good place to start. Once you tackle the box, the other
options are pretty easy.
The Client Side Image Map
In creating our client side map, there are three things we need:
A graphic image (obviously!)
A Special IMG tag
The map information containing the coordinates and URLs.
The following two parts will tell you all you need to know
to get up and running with your first map! If you do not know
the information to set up your client side file, don't worry-
just make sure you provide some traditional links on your page
as well. In all honesty, you should provide traditional links,
even if it's at the bottom of the page so that text browsers
are not left languishing.
The tag above is placed in your document where you want the map to
appear. Here are the important points:
The HREF link will vary based on your system. If you only want
to handle client side mapping, this can be a dummy statement.
In this actual case- it is.
You might make the ALT value to be a message instructing text
only browsers where their working links are located.
ISMAP tells the browser to treat the image as a map.
USEMAP tells the browser the location of the map instructions
in your code. Yes. You can use the same map image more
than once on a page, i.e. the top and bottom.
What are coordinates?
If you look at the box above, you will see that we have a
nice rectangle. Within the rectangle is a smaller one. Let's
call that our target. Notice that we mention only the
upper left corner and the lower right. With a little internal
math trick, the browser can figure out the other two corners.
Thankfully the browser has more geometry knowledge then we do.
Armed with this tidbit of knowledge, we can see that we are
going to somehow define links with two sets of two numbers.
X is considered the horizontal axis and Y is
the vertical. The point 0,0 is the uppermost left corner and
in the case of a 300X100 image- 300,100 is the lowest right
corner. Relax, get to know the MAPTHIS program and life will
be much easier.
What does the actual map code look like?
<MAP NAME="BALLMAP">
<!-- #$-:Image Map file created by Map THIS! -->
<!-- #$-:Map THIS! free image map editor by Todd C. Wilson -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:1.20 -->
<!-- #$AUTHOR:BRG -->
<!-- #$DATE:Sat Mar 01 03:11:29 1997 -->
<!-- #$PATH:C:\new_work\ -->
<!-- #$GIF:ballmap.gif -->
<AREA SHAPE=RECT COORDS="2,3,89,48" HREF=/search.shtml>
<AREA SHAPE=RECT COORDS="95,0,176,48" HREF=#MAILFORM>
<AREA SHAPE=RECT COORDS="185,1,263,48" HREF=#TOP>
<AREA SHAPE=RECT COORDS="271,2,359,49" HREF=/index.shtml>
<AREA SHAPE=RECT COORDS="368,2,485,47" HREF=/guestbook.html>
<AREA SHAPE=RECT COORDS="491,2,566,47" HREF=/links.shtml>
<AREA SHAPE=default HREF=/imagemap.shtml>
</MAP>
Uh, this looks really complicated.
Okay. Let's chop it up a bit. The entire MAP is surrounded by
the tags <MAP> and </MAP>. Notice the NAME=BALLMAP.
This is the location specified in our special IMG tag.
The next eight lines are comments as generated by MAPTHIS.
These are control lines used by the program if you need to go
back and make changes using MAPTHIS. See the DOS $PATH
mentioned?
The AREA line(s) are actually the meat of our map. Each AREA
defines a location on our image, and the action to take if the
mouse is clicked while the pointer is in that AREA.
SHAPE= This tells the browser how to deal with
the upcoming coordinates. In our case of the RECTangle
it will calculate the upper-right and lower-left corners
using the opposites.
COORDS= In the case of our RECTangle, these are
the two magic corners of the AREA. The upper-left corner
is 2 pixels over and 3 pixels down, pretty close to the
actual upper-left corner of our image. The lower-right
corner is located 89 pixels over from the left, and
48 down from the top.
HREF= This is the action to take if the mouse is
clicked in this region of the map.
SHAPE=DEFAULT This is a required entry in a client
side map. Since you will end up with space that has no
action associated with it, this line is usually set to the
document containing the map. In this way, it is like a
do nothing command.
The other options we have for defining shapes are:
CIRCLE The circle area is created by specifying
the bullseye as an X,Y location and a third number
indicating the radius of the circle. So, if we had an
area defined as 100,100,25 we would have a circle that
has its middle at 100,100 and extends all around that
point for 25 pixels. In otherwords, a circle with a
diameter of 50.
POLYGON The polygon is used to enclose unusual
shapes. Three X,Y sets would be a triangle. Four sets
might be a box or a slanted box. You can define as many
sets as needed. This is what you would use to define an
image map of something like a map of the United States
where each state is a link.
The Server Side Image Map
To support browsers that can't handle client side image maps,
you must install a map file on your system. It will be necessary
for you to contact your system administrator for the details.
The example below is an example of the NCSA format for such
a file.
default http://bignosebird.com/imagemap.shtml
rect index.shtml#SEARCH 2,3 89,48
rect #MAILFORM 95,0 176,48
rect #TOP 185,1 263,48
rect index.shtml 271,2 359,49
rect guestbook.html 368,2 485,47
rect /links.shtml 491,2 566,47
On our server, we indicate in the IMG tag that my MAP file is
located in:
/cgi-bin/imagemap/ballmap.imap
However, the file actually resides in the same directory as
the HTML document that calls it.
