Image maps are an interesting way for customers
to access your data and web pages. By useing an image map a customer
can click on an area of your image and be transported to another location,
picture, or document.
Useing an imagemap in your HTML code is not that
difficult, but creating the special picture image that is required can be.
We shall attempt to explain the entire process in these documents.
Image maps may come in any combination of two
varietys. They may be Server side Image maps or Client side Image maps
, or you may code your HTML page for both at the same time. The
differance's are noticeable and should not be ignored.
Client side image maps are a new addition to the
WWW. They allow the clients/users own WWW browser to do all the special
calculations necessary to access your imagemap. In addition because
the users WWW browser is doing the work, your image map will run much
faster. The drawback is that not all WWW browsers can do this yet.
Netscape 2.0 and Microsoft internet explorer are capable
of this feature.
Server side image maps are generally of an older
variety and require a special program to be on the Server computer to run
them. They run quite a bit slower then Client side maps but they are
compatible with 90% of the WWW browsers. Only the very oldest browsers
cannot run server side image maps.
Image maps contain some, or all of these ingrediants depending on their type
Image maps are actually a set of coordinates linking clickable
hotspots to certain links or images of your choice. The coordinates
"22,161,169,213" may be contained in a special map file such as
IMAGEMAP.NVM resident in your directory. Or they may have
the special coordinates imbedded directly inside the HTML code itself.
These special coordinates are created useing special Imagemap
creating programs. One such program is called
Mapedit and is easy to use.
It will take any Image of your choice and create the coordinates you need
for your Image maps.
Image maps consist of 3 necessary parameters for each
hotspot. A method, a URL, and a coordinate
METHOD is 1 of the following
URL is anyplace you wish to send the viewer,
either another HTML page, an image, another web site, etc.
Coordinate a number defineing where the hotspot
is and what shape it is.
Let us begin with the Server side Image Map
Server side image map | |
---|---|
<A HREF="imagemap.nvm"><IMG SRC="\images\imagemap.gif" ISMAP></A> |
All of the differant versions use the same Image itself, in
our case we are useing the imagemap.gif file. For a Server
side Image Map to operate it must reference a special program that is located
on the Server computer itself. This program is called
IMAGEMAP.NVM Other servers may use differant names.
The <A HREF command will reference to this special program. We use
again the <IMG SRC > command but must also add the ISMAP command
to this. The actual IMAGEMAP.NVM file is simply a text file
that contains the reference coordinates for the clickable hotspots. It is
commonly refered to as a MAP file, because originally servers had used the
.MAP extension and also MAP is a good name describing exactly what is being
done. This file is kept in your directory and is created by you.
IMAGEMAP is a file name and can be anything you wish But for
this server it must have the .NVM extension. The .NVM file
is based upon the NCSA common Map file format but has 1 differance.
Here is the .NVM file that was created for the clickable imagemap above.
;Image = imagemap.gif
poly tringimg.htm 98,31 160,89 159,29 98,31
rect "mailto:admin@mntnweb.com" 22,161 169,213
circle crcleimg.htm 128,115 154,115
rect squarimg.htm 27,28 83,112
The only differance for this server is the addition of the very first line ;Image = imagemap.gif. Otherwise the .NVM file is identical to the NSCA map file format. When you create your image map file or when it is created for you by an external program, remember to add this line pointing to the image file.
Client side image map | |
---|---|
<IMG SRC="\images\imagemap.gif" USEMAP="#imagemap" > <MAP NAME="imagemap"> <AREA SHAPE="POLYGON" HREF="tringimg.htm" COORDS="98,31, 160,89, 159,29, 98,31"> <AREA SHAPE="RECT" HREF="mailto:admin@mntnweb.com" COORDS="22,161,169,213"> <AREA SHAPE="CIRCLE" HREF="crcleimg.htm" COORDS="128,115,26"> <AREA SHAPE="RECT" HREF="squarimg.htm" COORDS="27,28,83,112"> </MAP> |
The client side image map does not reference any special Image
map program or file on the server computer, everything is contained inside
the HTML code itself. As we stated previously some older WWW browsers
may not be able to run this code. We again use the <IMG SRC>
command with the USEMAP command. "USEMAP" tells the browser that a map file
for the image is contained within. In our example we have called our
MAP file imagemap. We now use a special MAP file that contains
all of the hotspot coordinates that the WWW browser will need to know so
that it can return the proper URL;s for the user. We start this special
command with < MAP NAME="imagemap">: This also requires a closing
</MAP> statement per HTML requirments. We then add in an <AREA
SHAPE> command for each shape,with its coordinates and URL for each hotspot
in our image. This is very similar to the Server side map file, and
again each hotspot must contain
METHOD,URL & COORDINATE.
The complete command for 1 single hotspot looks like this.
<AREA SHAPE="CIRCLE" HREF="crcleimg.htm" COORDS="128,115,26">
You may have as many hotspots with their attendant
METHOD,URL,COORDINATES as you wish
Do not forget to close with a </MAP> command.
The final type of Image map combines the 2 types together, this
is probably the best method to use, it will take care of all WWW browsers
and will be most compatible. In addition the users browser will, if
capable use the Client side image map method automatically.
The only differance between this and the Client side Image map
is the IMG SRC commands all rolled into one.
<A HREF="imagemap.nvm"><IMG SRC="\images\imagemap.gif" ALT=""
USEMAP="#imagemap" ISMAP></A>
We hope this article has been informative for you, if you have any further questions please feel free to write us.
Barlow & Barlow web services | ||
---|---|---|
|
|