BigNoseBird.Com- Small Logo
The 508 compliant Guide to 
       Big Nose Bird
Site Search Engine


Navigation Bar

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 Special IMG Tag
<A HREF="/cgi-bin/imagemap/ballmap.imap">
<IMG SRC="/images/ballmap.gif" ALT="Navigation Bar"
BORDER=0 ISMAP WIDTH=575 HEIGHT=50
USEMAP="#BALLMAP"></a><BR>

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?

<AREA SHAPE=RECT COORDS="2,3,89,48" HREF=/search.shtml>

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.



Find or Give Help on the BBS
 
Home Top E-Mail
If it looks great, it's by Christine
Some Fine Print
© 1997-2003 BigNoseBird.Com®, Inc. All rights reserved. All other trademarks are the sole property of their respective owners. The products that we recommend are only ones that we use. We have no relationship with any of the authors or their companies. We cannot assume responsibility for their ultimate performance or lack of same. We also cannot assume responsibility for either any programs provided here, or for any advice that is given since we have no control over what happens after our code or words leave this site. Always use prudent judgment in implementing any program- and always make a backup first! For further information, please read our Privacy Statement. We can be contacted at webmaster@bignosebird.com.


<reallybig.com>
Web Builder Network Portal
Advertise
on the
Reallybig.com
Network
BigNoseBird Newsletter
Subscribe
Un-Subscribe


Sign up today to receive our low volume newsletter. Tips, tricks, news, and whatever else crosses our minds.
Back Issues
Privacy Statement