IMAGE MAPS

Client side and Server side

     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

  1. an image in gif format
  2. a map file, of map coordinates, based upon the image and contained in a seperate file or embedded in the HTML code itself
  3. image map program on the server side (transparent to you and the user) IMAGEMAP.NVM

   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

  1. rect
    Coordinates: upper left   lower right
    rect squareimg.htm 27,28   83,112
  2. circle
    Coordinates: center  edgepoint
    circle crcleimg.htm 128,115   154,115
  3. poly
    Coordinates:each coordinate Number is a pt of the polygon
    tringimg.htm 98,31  160,89  159,29  98,31
  4. point
    Coordinate:the point
  5. default
    Coordinate: none ( for the default URL)

   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.

   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.

   You may have as many hotspots with their attendant METHOD,URL,COORDINATES as you wish
  Do not forget to close with a </MAP> command.





Server side & Client side image maps combined
<A HREF="imagemap.nvm"><IMG SRC="\images\imagemap.gif" ALT="" USEMAP="#imagemap" ISMAP></A>
<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 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
backReturn to techinfoback
mailmail
mainreturn to mainpagemain