Home HTML and CSS Tutorials Image Map Tutorial

Image Map Tutorial

Author: Jeff Singer More by this author

Added: Nov 15, 2004 Rating:

Level: Beginner Software: Dreamweaver

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

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://yourdomain.com/yourpage.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.

Author's URL: Jeff Singer