Full Sail: Power User Tips

Image-Maps and
Adding Images
To Make a Website
Text-Friendly

by
Norman L. De Forest
Beacon Correspondent

Contents:

Image Maps.
- Start with a picture on your page
  and choose what kind of map to use.
- A server-side image map ([ISMAP]).
- Accessing [ISMAP] image maps with lynx.
- A client-side image map ([USEMAP]).
- Server-side and Client-side image maps combined.
- Adding titles to map links.
- An "invisible" menu added for lynx (in which images are added to the page to make it more text-friendly).
The Mapping Information.
- Server-side maps.
  - WARNING for DOS/Windows/Mac users.
- Client-side maps.
  - A note for I-View users.
Which map type does your browser prefer?
Some References.

Let us suppose I wanted to create a page that allowed you to see back issues of Beacon articles which I have written or to which I have contributed. Perhaps, for some reason, I want to use an image map to allow the selection -- maybe to use as an example in another Beacon article -- like this one for instance.

First I have to create an image to use as a menu. The actual creation of images is beyond the subject of this article. Let's just say that, in this case, I used the Paint programme that comes with Windows 3.1 and absolutely no artistic talent whatsoever to create the image and then another programme to convert the picture to GIF format. For the sake of lynx users without graphical access, it is just an image of the following text with different fonts and colours.

          Don't Take the Stairs;    404: Sorry That Page
             Use the Elevator         Has Gone To Lunch

               Sending Email        The Key(s) to Usenet
                 With Lynx             with beta-tin

                 Browsing           Creating Web Pages
              With Character          With Character

                           Computers 
                        With Characters

Putting the image on a web page is as easy as typing in the following HTML on the page:

<img src="img/back-iss.gif"> is the HTML that actually puts the image on the page.

The  ...  centers the image for browsers meeting the newer HTML standards and the seemingly redundant and non-standard Netscape tags, <center> ... </center> centers the image for older browsers that support the Netscape extensions to HTML but not the newer HTML standards.

Here's what we have so far.

Now we have to convert the picture into an image map. You have two types to choose from, server-side image maps and client-side image maps. There are advantages to both types.

Server-side image maps -- Advantages:
1. The first types of image maps to be implemented so they support older browsers.
2. The map file is separate from the web page so a menu common to every page on your site will be defined only once in the map file instead of being repeated in every page. This makes it easier to change the menu and reduces the disk space used. (Note that if the map file has a default that leads back to the page the user is on, then a separate map file will be needed for each page and the advantage of a single map file is lost.)
Server-side image maps -- Dis-Advantages:
1. It requires special software running on the server to process image maps.
2. It is very unfriendly for text-only browsers as there is no way for users with text browsers to easily access any of the links.
Client-side image maps -- Advantages:
1. No special software is needed on the server to process image maps. The browser does all of the work.
2. It is more friendly for text-only browsers as it is possible for users with newer text browsers to access the links. Those with older text browsers can view the HTML source to find the links.
Client-side image maps -- Dis-Advantages:
1. Will not work with older browsers that only handle server-side image maps.
2. The map file is part of the web page so a menu common to every page on your site will be repeated in every page. This makes it harder to change the menu and increases the disk space used.

Let's look at both of them, starting with...

Server-side image maps ([ISMAP]).

First it is necessary to create a map file. This defines the "hot spots" on the image and the URLs to be used when those areas are selected. The back-issue map file, bi1.map for the server-side demonstration page has these contents:

default http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9910/bi1.htm
rect http://www.chebucto.ns.ca/Newsletter/Beacon/Back/
A9807/power.htm 10,10 233,78
rect http://www.chebucto.ns.ca/Newsletter/Beacon/Back/
A9810/humor.htm 237,10 467,84
rect http://www.chebucto.ns.ca/Newsletter/Beacon/Back/
A9812/power3.htm 10,90 210,147
rect http://www.chebucto.ns.ca/Newsletter/Beacon/Back/
A9902/power4.htm 220,90 510,147
rect http://www.chebucto.ns.ca/Newsletter/Beacon/Back/
A9904/power5.htm 10,155 225,219
rect http://www.chebucto.ns.ca/Newsletter/Beacon/Back/
A9906/power6.htm 247,155 470,219
rect http://www.chebucto.ns.ca/Newsletter/Beacon/Back/
A9908/power7.htm 135,226 345,297

Exactly what goes into the map information is covered lower down in this article. For now I will concentrate on the HTML part.

We add a bit more HTML around our image tag:

The <a href="/cgi-bin/imagemap/Newsletter/Beacon/Back/A9910/bi1.map"> and </a> convert the image into a link to the imagemap handling routine on the server. The border="0" stops the image from being displayed with a coloured border which could make it look like an ordinary link. The ISMAP tells the browser that this image is a map image so it will know that it has to send the mouse coordinates within the image to the server as well as the URL in the <A HREF...> tag by adding "?" and the coordinates to the end of the URL.

Here's what we have now.

Accessing [ISMAP] image maps with lynx.

Lynx users can have an especially difficult time accessing server-side image maps. All they get is a link number and the text [ISMAP] to go by. There is a way to access these, however. If you have graphics capability on your machine and a way to view images off-line then you can:

Press '*' to turn on the lynx display of links to images if it isn't already on.
Select the image associated with the image map and download it.
View the image off-line and estimate the coordinates where the likely hot-spots will be centered. Remember, (0,0) is the upper left corner of the image. Write down these sets of coordinates to use as guesses.

With or without image-viewing capability, you can now:

Press '=' with the [ISMAP] link selected. Write down the URL shown as the link on the page being viewed.
Press '=' or the left-arrow key to return to the page.
While viewing the page, press 'g' and then type in the URL you wrote down. At the end of it, type a question-mark, '?' and then an x,y coordinate pair as a guess for a hot spot and press ENTER. Do not enter any parentheses.
Repeat the previous step for other guesses until you think you have found all of the hot spots you may be interested in.

For example, for the sample imagemap page above lynx users can hit all of the links in the map file with the following URLs (each one broken into two lines here so you can see the whole thing but the URLs would be typed in as one long line with no spaces or line breaks if the links below were not provided.

A client-side image map ([USEMAP]).

This time, to our HTML, we add something a bit different:

border="0" does the same thing as above. The USEMAP="#bissuemap" tells the browser that this image is to be used as a map and that the map information is within the <MAP ...> ... </MAP> tags labelled bissuemap. That information is not in a separate file but embedded in the web page and looks like this:

Again we wrap up with:

</center>

Here you can see what the client-side imagemap looks like.

Server-side and Client-side image maps combined.

The bi3.map file has one line changed from the equivalent in bi1.map so the default action will be to return to bi3.htm:

default http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9910/bi3.htm

The image now has both types of imagemaps specified:

The rest is the same as the client-side imagemap above. This imagemap will now support both older and newer browsers.

Try out the combined imagemap here. Lynx users will get [ISMAP] and [USEMAP].

Adding titles to map links.

While lynx users can access client-side image maps without a great deal of difficulty, it can still be difficult to navigate with them, especially if the URLs are not very descriptive. A lynx user following the [USEMAP] link on the page above is presented with this uninformative menu:

bissuemap

MAP: http://www.chebucto.ns.ca/Newsletter/Beacon/
Back/A9910/bi3.htm#bissuemap

     * [1]
      http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9807/power.htm
     * [2]
      http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9810/humor.htm
     * [3]
      http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9812/power3.htm
     * [4]
      http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9902/power4.htm
     * [5]
      http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9904/power5.htm
     * [6]
      http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9906/power6.htm
     * [7]
      http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9908/power7.htm

A TITLE attribute can be specified for each link in a client-side image map. The HTML mapping information would then look like this:

Now, lynx users would be presented with this when they access the [USEMAP] link:

bissuemap

MAP: http://www.chebucto.ns.ca/Newsletter/Beacon/Back/
A9910/bi4.htm#bissuemap

     * [1] Don't Take the Stairs; Use the Elevator
     * [2] 404: Sorry That Page Has Gone To Lunch
     * [3] Sending Email With Lynx
     * [4] The Key(s) to Usenet with beta-tin
     * [5] Browsing With Character
     * [6] Creating Web Pages With Character
     * [7] Computers With Character(s)

See the amended page with titles.

An "invisible" menu added for lynx.

Let's add some images to the page to make it more text-friendly. No, that's not a contradiction. We want to add some text and some links for text browsers without cluttering up things for graphical browsers. One way text can appear on a page is when the text is ALT text for an image. What we need is an image that graphical browsers can't see. That is a 1-pixel by 1-pixel transparent GIF. Feel free to download a copy of invisibl.gif for your own use. Where text is needed, add a GIF and specify the wanted text as ALT text for the GIF. First it would be a good idea to tell lynx users that the text menu is a replacement for the image map and not in addition to it. To tell them that, ALT text can be added to the image used for the image map:

Now add the menu:

You may ask why the following is scattered around:

<img src="img/invisibl.gif" BORDER="0" ALT=".">

This is done to ensure that there is at least one un-highlighted printable character between each menu selection. This makes the menu more usable with some types of screen-readers used by the blind. Some of them will, on command, read the line of text that the cursor is on and stop. Others will start at the cursor and read all highlighted text (link text) until an un-highlighted printable character is encountered (with the space not being counted as printable). Ensuring that an un-highlighted "." appears between each link prevents the latter type of screen-reader from reading the whole menu as one link. Ideally, every menu item would also be on its own line but that would add too much vertical blank space for most graphical pages. Two links per line is a compromise and closely matches the layout on the image map. For those of you using Netscape or Internet Explorer, this is what the page looks like with the lynx browser:

                          Back Issues of My Articles
                                       
An invisible menu added for lynx.

      [1] [ISMAP]-[2] Text-only browser users can use the menu below :
                                      
   [3] Don't Take the Stairs; Use the Elevator .
                       [4] 404: Sorry That Page Has Gone To Lunch .
   [5] Sending Email With Lynx . [6] The Keys to Usenet with beta-tin .
   [7] Browsing With Character . [8] Creating Web Pages With Character .
                [9] Computers With Character(s) .

The imagemap page with the invisible menu added.

The Mapping Information:

Server-side maps.

For this example, I will use an image map with a circle, a square (which could have been a rectangle as well), and a five-pointed star. The map file for it, geometry.map contains:

default http://www.chebucto.ns.ca/Newsletter/Beacon/Back/
A9910/backgnd.htm

circ http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9910/circle.htm 100,100 100,150

rect http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9910/square.htm 200,50 300,150

poly http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9910/star.htm 175,200 186,242 236,242 195,275 208,321 175,293 142,321 155,276 114,242 164,242

While one or more of the four lines above may appear to wrap on your display, each mapping item (default, circ, rect, poly, or point) must be on one continuous line with no line breaks.

NOTE: The exact format for a map file varies from one type of server to another. The syntax for circles is especially prone to differences. Check the documentation for your system.

There are five different things that can be specified in a map, a default, circles, rectangles, polygons, and points. The formats for them with the server used at the Chebucto Community Net are:

default URL
circle URL x1,y1 x2,y2
- where x1,y1 is the centre of the circle
- and x2,y2 is a point on the circle's circumference
- (it is easiest to use x2 = x1 and y2 = y1 + radius.)
- circle can be abbreviated as circ.
- Note: some servers use the centre and the radius instead of the centre and a point on the circumference, x1,y1 r. Check your local documentation.
rectangle URL x1,y1 x2,y2
- where x1,y1 is the coordinates of one corner of the rectangle, preferably the upper-left corner
- and x2,y2 is the coordinates of the diagonally-opposite corner.
- rectangle can be abbreviated as rect.
polygon URL x1,y1 x2,y2 x3,y3 ... xn,yn
- where x1,y1 is the coordinates of one vertex of the polygon
- and x2,y2 to xn,yn are the coordinates of successive vertices as you move clockwise around the edge of the polygon. ("..." indicates that an undeterminate number of additional coordinates have been omitted.) If xn,yn does not equal x1,y1 then xn,yn is assumed to be joined to x1,y1 by a straight line.
- polygon may be abbreviated as poly.
point URL x1,y1
- where x1,y1 are the coordinates of the point.
- Note: when you specify one or more points, the closest point to the location you click on is the one chosen when you haven't clicked inside a specified circle, rectangle, or polygon. It is pointless (no pun intended) to specify a default action if you have specified one or more points. Specifying one point is equivalent to specifying a default as it will always be the closest point.

WARNING for DOS/Windows/Mac users:

          If a server-side map file is to be used on a UNIX platform and you create it on your own system, it will be necessary to convert the newline characters from CR,LF or CR to the UNIX newline, LF (line-feed). DOS/Windows users may also have to get rid of the Control-Z end-of-file marker (character 26) from the file as well. The utility I use on a DOS system is the free CHANGE.COM from Volume 5, Number 9 issue of PC Magazine. It can be downloaded in zipped form from the Simtel archives at:
ftp://ftp.simtel.net/pub/simtelnet/msdos/pcmag/v5n19.zip
and can be unzipped with most unzipping utilities including:
unz540x.exe -- Info-Zip's free UnZip (166K)
or:
unz540x3.exe -- Info-Zip's free UnZip with fast '386 version included (241k).
I then use the following commands to convert any text files going to my web site to the UNIX format:
Delete the end-of-file marker:
     CHANGE filename 26 ""
Delete the CR from the CR,LF pairs:
     CHANGE filename 13 ""

Visit a server-side image map with different shapes. Links for lynx are included.

The same server-side image map except using points instead of a default. Links for lynx are included.

Client-side maps.

The information for client-side image maps is similar to that used for server-side image maps. There are five differences that can trap an unwary webmaster:

The fields are separate attributes of an AREA tag with a keyword for each, SHAPE, COORDS, HREF, and (possibly) TITLE with the relevant data in quotes following the keyword and = and not just strung together with spaces between the parameters.
Commas are used to separate coordinates instead of spaces
"200,50,300,150" instead of 200,50 300,150.
The format for a circle is "x,y,r where x,y is the coordinates of the centre and r is the radius of the circle.
Not all browsers recognise the point specifier.
The default should be last as some browsers use the first matching specifier encountered even if it is the default one.

Here is the same mapping information as above except for client-side formatting changes and the other associated HTML:

If you use one or more points instead of a DEFAULT item then this:

is replaced by something like this:

Visit a client-side image map with different shapes.

The same client-side image map except using points instead of a default.

A note for I-View users.

Client-side image maps for the web and client-side image maps for I-View are not interchangeable if the web version uses default, point, or circ (or circle).

There are two differences between the HTML format used for client-side image maps on standard web pages and the format needed to work with I-View, the off-line graphical browser:

Point and default do not work with I-View. If you must use a default, use a rect as the last item with the entire image specified in the coordinates.
I-View requires a format similar to server-side maps for specifying circle coordinates, x1,y1,x2,y2 instead of x,y,r.

Which map type does your browser prefer?

Test of browser preference.

For graphical browsers only. Lynx can use either [ISMAP] (with difficulty) or [USEMAP].

Some older browsers support only server-side image maps. Some browsers support both types. If both types are present, which type will the browser choose?

Will your browser choose left or right (server-side map preference) or will it choose top or bottom (client-side map preference)? Click on the image below to find out.

Some References.

The two main server-side image map formats:

Other Web sites: (URLs in alphabetical order to avoid favouritism)

A Newsgroup:

Usenet - comp.infosystems.www.authoring.images.

You may direct comments or suggestions about this column to:

Norman L. De Forest, af380@chebucto.ns.ca

Back To The Beacon Index

Full Sail: Power User Tips

Image-Maps and Adding Images To Make a Website Text-Friendly

Image-Maps and
Adding Images
To Make a Website
Text-Friendly