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:
<center> <p align="center"> <img src="back-iss.gif"> </p> </center>
<img src="back-iss.gif"> is the HTML that actually puts the image on the page.
The <p align="center"> ... </p> 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.
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.
Let's look at both of them, starting with...
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/~af380/imagemaps/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:
<center> <p align="center"> <a href="/cgi-bin/imagemap/~af380/imagemaps/bi1.map"> <img src="back-iss.gif" border="0" ISMAP></a> </p> </center>
The <a href="/cgi-bin/imagemap/~af380/imagemaps/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.
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:
With or without image-viewing capability, you can now:
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.
This time, to our HTML, we add something a bit different:
<center> <p align="center"> <img src="back-iss.gif" border="0" USEMAP="#bissuemap">
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:
<MAP NAME="bissuemap"> <AREA SHAPE="RECT" COORDS="10,10,233,78" href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9807/power.htm"> <AREA SHAPE="RECT" COORDS="237,10,467,84" href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9810/humor.htm"> <AREA SHAPE="RECT" COORDS="10,90,210,147" href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9812/power3.htm"> <AREA SHAPE="RECT" COORDS="220,90,510,147" href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9902/power4.htm"> <AREA SHAPE="RECT" COORDS="10,155,225,219" href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9904/power5.htm"> <AREA SHAPE="RECT" COORDS="247,155,470,219" href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9906/power6.htm"> <AREA SHAPE="RECT" COORDS="135,226,345,297" href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9908/power7.htm"> </map>
Again we wrap up with:
</p> </center>
Here you can see what the client-side imagemap looks like.
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/~af380/imagemaps/bi3.htm
The image now has both types of imagemaps specified:
<a href="/cgi-bin/imagemap/~af380/imagemaps/bi3.map"> <img src="back-iss.gif" border= "0" USEMAP="#bissuemap" ISMAP></a>
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].
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: file://localhost/csuite/home/80/af380/public_html/imagemaps/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:
<MAP NAME="bissuemap"> <AREA SHAPE="RECT" COORDS="10,10,233,78" href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9807/power.htm" TITLE="Don't Take the Stairs; Use the Elevator"> <AREA SHAPE="RECT" COORDS="237,10,467,84" href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9810/humor.htm" TITLE="404: Sorry That Page Has Gone To Lunch"> <AREA SHAPE="RECT" COORDS="10,90,210,147" href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9812/power3.htm" TITLE="Sending Email With Lynx"> <AREA SHAPE="RECT" COORDS="220,90,510,147" href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9902/power4.htm" TITLE="The Key(s) to Usenet with beta-tin"> <AREA SHAPE="RECT" COORDS="10,155,225,219" href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9904/power5.htm" TITLE="Browsing With Character"> <AREA SHAPE="RECT" COORDS="247,155,470,219" href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9906/power6.htm" TITLE="Creating Web Pages With Character"> <AREA SHAPE="RECT" COORDS="135,226,345,297" href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9908/power7.htm" TITLE="Computers With Character(s)"> </map>
Now, lynx users would be presented with this when they access the [USEMAP] link:
bissuemap
MAP: file://localhost/csuite/home/80/af380/public_html/imagemaps/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.
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:
<a href="/cgi-bin/imagemap/~af380/imagemaps/bi5.map"> <img src="back-iss.gif" border= "0" USEMAP="#bissuemap" ISMAP ALT="Text-only browser users can use the menu below"></a><img src="invisibl.gif" BORDER="0" ALT=":">
Now add the menu:
<p> <a href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9807/power.htm"> <img src="invisibl.gif" BORDER="0" ALT="Don't Take the Stairs; Use the Elevator"></a> <img src="invisibl.gif" BORDER="0" ALT="."><br> <img src="invisibl.gif" BORDER="0" ALT=" "> <a href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9810/humor.htm"> <img src="invisibl.gif" BORDER="0" ALT="404: Sorry That Page Has Gone To Lunch"><</a> <img src="invisibl.gif" BORDER="0" ALT="."><br> <a href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9812/power3.htm"> <img src="invisibl.gif" BORDER="0" ALT="Sending Email With Lynx"></a> <img src="invisibl.gif" BORDER="0" ALT="."> <a href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9902/power4.htm"> <img src="invisibl.gif" BORDER="0" ALT="The Keys to Usenet with beta-tin"></a> <img src="invisibl.gif" BORDER="0" ALT="."><br> <a href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9904/power5.htm"> <img src="invisibl.gif" BORDER="0" ALT="Browsing With Character"></a> <img src="invisibl.gif" BORDER="0" ALT="."> <a href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9906/power6.htm"> <img src="invisibl.gif" BORDER="0" ALT="Creating Web Pages With Character"></a> <img src="invisibl.gif" BORDER="0" ALT="."><br> <img src="invisibl.gif" BORDER="0" ALT=" "> <a href="http://www.chebucto.ns.ca/Newsletter/Beacon/Back/A9908/power7.htm"> <img src="invisibl.gif" BORDER="0" ALT="Computers With Character(s)"></a> <img src="invisibl.gif" BORDER="0" ALT="."> </p>
You may ask why the following is scattered around:
<img src="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.
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/~af380/imagemaps/backgnd.htm circ http://www.chebucto.ns.ca/~af380/imagemaps/circle.htm 100,100 100,150 rect http://www.chebucto.ns.ca/~af380/imagemaps/square.htm 200,50 300,150 poly http://www.chebucto.ns.ca/~af380/imagemaps/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:
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.
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:
Here is the same mapping information as above except for client-side formatting changes and the other associated HTML:
<center> <p align="center"> <img src="geometry.gif" border= "0" USEMAP="#geomap" ALT="[A picture with a red circle, a blue square, a magenta star, and a yellow background.]"></a> <MAP NAME="geomap"> <AREA SHAPE="CIRCLE" COORDS="100,100,50" href="http://www.chebucto.ns.ca/~af380/imagemaps/circle.htm"> <AREA SHAPE="RECT" COORDS="200,50,300,150" href="http://www.chebucto.ns.ca/~af380/imagemaps/square.htm"> <AREA SHAPE="POLYGON" COORDS="175,200,186,242,236,242,195,275,208,321,175,293,142,321,155,276,114,242,164,242" href="http://www.chebucto.ns.ca/~af380/imagemaps/star.htm"> <AREA SHAPE="DEFAULT" href="http://www.chebucto.ns.ca/~af380/imagemaps/backgnd.htm"> </map> </p> </center>
If you use one or more points instead of a DEFAULT item then this:
<AREA SHAPE="DEFAULT" href="http://www.chebucto.ns.ca/~af380/imagemaps/backgnd.htm">
is replaced by something like this:
<AREA SHAPE="POINT" COORDS="0,185" href="http://www.chebucto.ns.ca/~af380/imagemaps/left.htm"> <AREA SHAPE="POINT" COORDS="369,185" href="http://www.chebucto.ns.ca/~af380/imagemaps/right.htm">
Visit a client-side image map with different shapes.
The same client-side image map except using points instead of a default.
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:
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.
The two main server-side image map formats:
Other Web sites: (URLs in alphabetical order to avoid favouritism)
A Newsgroup: