Image Mapping

Image maps are dynamic or active images embedded in html documents. By clicking on different regions of an image map the user links to different documents or URLs. Image maps can be great space savers, allowing designers to place several links into a small area. They are an alternative to text-based navigation elements.

An imagemap allows you to define specific regions of an image that you have created or scanned and uploaded to your www directory. These sections or hot spots are defined by the web page designer using standard HTML markup tags. This markup may be either in a separate file or in the same web page as the image.

You can construct image maps in one of two ways. One way is called theclient-side image map. Client-side maps depend upon the browser to read the map coordinates that define the hot spots and call up the appropriate document.

The second way, called the server-side image map, sends the chosen coordinates defining the boundaries of the hot spots to a script located on the server which then returns the document to the user.

Client-side image maps can be read by most of the popular browsers including Netscape Navigator 2.x (and higher), Microsoft's Internet Explorer and AOL's browser. However, they cannot be read by screen reader software or text-based browsers, so it is still important to provide alternative methods of access to your links.

Working with Client-side Image Maps

This image is a client-side image map. Every region in the image has been defined and associated with a specific URL. Counting the white space, the image has been divided into three distinct regions, a rectangle, a circle, and a polygon and a region made up of "what's left" (the white space). There are URLs that are associated with each region leading to four different documents. If you click on any of the three elements, you will be sent to a different document. If you click anywhere in the white space, you will be sent to a default document. On this page, you'll see the actual markup for this map, called IUimage.gif. This link opens a new browser window, so you should close it when you are ready to return here. On this page, it is embedded at the bottom of the page markup. The individual lines of HTML code that make up this image map are described below.

Client-side image maps consist of three elements:

• an image file (.gif or .jpg) that you create yourself with a graphics program or you scan in and upload
• an HTML document, which will contain the image, and which can contain all of the other HTML we have learned
• a map file, which contains the markup that instructs the browser to request specific documents when regions of the image map are activated. Generally, this file is embedded within the html source code but can be a separate file.

Creating a client-side image map

1: Create the image file

• The image file can be created by any program (PhotoShop, Corel, PhotoStyler) and needs no special treatment. You can also scan any image and use it as an image map. The image simply serves as a picture which can store your not-so-pretty links.

2: Define the hot spots in the image file

• This is also done offline. After you are satisfied that the image looks the way you want it to, sketch out the regions that you would like to serve as hot spots. You can print your image and draw on it!

  You can use three shapes:

• <shape="rect"> which is the attribute that defines a rectangle
• <shape="circle"> which is the attribute that defines a circle
• <shape="poly"> which is the attribute that defines an irregularly shaped polygon

• Once you have decided upon the regions, you have to determine the coordinates of the shapes.

  The easiest way to determine the coordinates of these shapes is to use an imagemapping program like MapEdit or WebMap. In addition, most graphics programs will show you the coordinates, generally at the bottom of the screen in the message bar or in a separate window (as in the case of Photoshop).

  You can then write these coordinates down and insert them into the HTML code, as will be described below.

  

• You need different sets of coordinates for the different shapesin the image map:

• For a rectangle, you need the x, y coordinates for the upper left and lower right corners. For the rectangle in the image above, the coordinates are:

  Upper left x=10, y=8 Lower right x=260,y=58

• For a circle, you need the x, y coordinates for the center and a point on the circumference of the circle. Move the cursor in a straight line so that the x coordinate does not change. Move the cursor in a straight line to the right of the circle so that the y coordinate of the point on the circumference of the circle will be larger than the y coordinate of the center of the circle. You can also move the cursor to the left of the center of the circle to a point on the circumference of the circle.

  Then, subtract the larger from the smaller number. This gives you the radius of the circle.

  For the circle in the image above, the coordinates you need to get the ones used in the map file are:

  Center of the circle x=70, y=149 Point on the circumference of the circle x=70, y=204 This makes the radius r=55

  So, for the circle in the image above, the coordinates are:

  x=70, y=149, r=55

• For a polygon, you need the x, y coordinates for all the points (no matter how many there are. For the polygon in the image above, there are ten angles, each of which has x, y coordinates. These coordinates are:

  Angle 1 x=162, y=81 Angle 2 x=185, y=68 Angle 3 x=245, y=67 Angle 4 x=252, y=195 Angle 5 x=211, y=235 Angle 6 x=188, y=237 Angle 7 x=166, y=241 Angle 8 x=134, y=235 Angle 9 x=158, y=190 Angle 10 x=162, y=80

• For the region that is composed of what's left (the white space), a different strategy is used. A browser reads the image map markup sequentially, so the hot spots that are defined first are recognized. Saving the default region for last in the markup means that coordinates can be given for the entire image and the browser only recognizes what's left: the white space. In the case of the image above, the shape is a rectangle, so the coordinates are:

  Upper left x=0, y=0 Lower right x=268, y=249

3: Create the map file

• What turns the image into an image map is a map file that is embedded in a standard html document. The map file is critical because it has all the important information the browser needs to make the image map work.

  Now we're getting to the fun part!

  The chunk of html code generally referred to as the map file does not have to be a separate file. But it does have to contain the following information:

• <map> </map> This is the paired tag that encloses all of the markup for the map file.
• <name="label"> This is an attribute that contains the name of the image that you are using as an image map
• <area shape="type"> This attribute defines the type of shape of the areas that are designated as hot spots or default areas in the image. It can take three values:

  • <area shape="rect" />
  • <area shape="circle" />
  • <area shape="poly" />

  The alt="text" attribute is also used with the area attribute and provides a text alternative to the image.

• <coords="x,y"> This attribute defines the coordinates of the areas that are designated as hot spots or default areas in the image. It can take three values:

  • <coords="x1,y1,x2,y2"> for the upper left and lower right corners of a rectangle. The complete markup for a rectangle is:

    <area shape="rect" coords="x1,y1,x2,y2" />

  • <coords="x1,y1, r1"> for the center of a circle and a point on its circumference. The complete markup for a circle is:

    <area shape="circle" coords="x1,y1,r1" />

  • <coords="x1,y1,x2,y2,x3,y3...x_n,y_n"> for the angles that make up a polygon. The complete markup for a polygon is:

    <area shape="poly" coords="x1,y1,x2,y2,x3,y3...x_n,y_n" />

• <href="url.html"> This attribute specifies the location of the documents that are associated with each of the hot spots in the image map. The markup for a document associated with a rectangle looks like this:

  <area shape="rect" coords="x1,y1,x2,y2" href="url.html" />

  If you want nothing to happen when a user clicks on a region of the image, you can use the nohref attribute as follows:

  <area shape="rect" coords="x1,y1,x2,y2" nohref />

4: Place the image map into the html document

So, when the image mapis created, where does it go in the document? And where does the map file go?

• The image map can be placed anywhere in your document. You use the same type of markup as you would for placing any image on your page. For example, you would use the following markup to place the image map seen above on this page:

  <img src="IUimage.gif" usemap="#image" alt="IU Icon ImageMap - Client-Side" border="2" height=250 width=269 align="left" />

  In this example, the markup should look familiar, with the exception of one element:

  usemap="#image"

  This is an attribute that acts as a target identifying the image as an image map for the browser. The target # tells the browser where to locate the map file. usemap= directs the browser to the map file elsewhere in the document, which contains the anchor:

  <map name="image">

• The map file markup can appear anywhere between the <body>tags, but it is usually placed way at the end of the html document - just above the </body> tag. Remember that if you do this, you use must use a within page link (as described above) to direct the browser to the map file.

  It is also possible to place the map file in a different document, in which case the <usemap> element acting as the target must contain the URL of the document. In generic form, the following markup would work:

  <img src=/directory_name/image.gif" usemap="/directory/filename#name_of_map_file" />

• Remember that the browser reads the information sequentially so that if there is any overlap of the areas the first definition the browser sees is the one that will be used.

5: Click away!

Now that wasn't so bad, was it? Oh...one more thing.

• You must create the accompanying pages that are linked to the image map! In this example, there are four pages that are associated with the image map:

  circle.html	rect.html	polygon.html	other.html

Once you master image maps a whole new world of web page design is open to you. You don't have to link to static pages, you can click on an image and send a query to a database, launch a java applet, or a start a QuickTime movie. See, I told you it was easy.

Here's another example of a client-side image map that you can use.

Workingwith Server-side Image Maps

The second type of image map is called server-side because much of the action that takes place when you click on a hot spot takes place on the server. This type of image map is the older and more common. The process of accepting the map coordinates and sending the user to the right page based upon where they clicked takes place on the server not in the user's web browser. It is a little more difficult to set up because it will involve you getting permission from the person maintaining the web server since resources on the server are required to make the image map work. You have to use special programs that support this type of image map that are installed on the server in the cgi-bin directory.

Server-side image maps have four elements:

• an image file (.gif or .jpg)
• an html document in which to display the image
• a map file (.map)
• an imagemap program(in the cgi-bin directory of the server)

There are three steps involved in creating a server-side image map.

1: Create the image file

• There is no difference between a client-side image map file and a server-side image map file. They are just ordinary graphics (or extraordinary graphics!).

2: Place the image map in the html Document

• The markup in the html document which signals that the image is active is a little different than what we used for the client-side image map. For server-side image maps we add the <ismap> attribute and then we make the image a link to the imagemapping program on the server or directly to the .map file depending on what type of server you are using. (Netscape Enterprise server to the .map file whereas Apache server links to the imagemap program).

  So, the generic markup for the image that will be the image map would look like this:

  <img src="/user/image.gif" ismap>

• Then we make it a link by surrounding the element with the <a> tags and pointing it to the imagemapping program:

  <a href="/cgi-bin/imagemap/user/image.map"> <img src="/user/image.gif" ismap></a>

  This address is actually two addresses joined together. The first part, /cgi-bin/imagemap is the address of the imagemapping program which (hopefully) will already be installed on your server. The second part of the address, /user/image.map, is where the .map file can be found.

  For servers that do not need to call the imagemapping program link directly to the map file:

  ><a href="/user/image.map"> <img src="/user/image.gif" ismap></a>

3: Create the map file and place in directory

• The map file for a server-side image map contains the shape name of the area (rect, poly, circle, default), the URL assigned to the area and the coordinates which define the area. The map file is a simple text document. It does not have any of the html tags or attributes. The document is opened and read by the imagemapping program which then sends the specified file to the user.

  The server-side map file for the IU Icons Image is:

  rect rect.html 10,8,260,58

  poly polygon.html 62,81,185,68,245,67, 252,195,211,235,188,237,166,241,134,235,158,190,162,80

  circle circle.html 70,149,55,202

  default other.html

  This file would be called something.map and could be placed in the same directory as the image file.

  To find the coordinates for the areas you can use the same methods as described above (a graphics program or imagemap program).

4: Start clicking!

• That's all there is to it! The upside to server-side functions is that they are not browser dependent. The down-side is that they put an added strain on the server and because of the added steps involved they are slower to execute than are client-side image maps.

Not too shabby. Now let's try tables!