2004/id/draft-ietf-html-clientsideimagemap-00.txt

INTERNET-DRAFT                                          James L. Seidman
<draft-ietf-html-clientsideimagemap-00.txt>             Spyglass, Inc.
Expires SIX MONTHS FROM--->                             February 4, 1994

      A Proposed Extension to HTML : Client-Side Image Maps

Status of this Memo

   This document is an Internet-Draft. Internet-Drafts are working
   documents of the Internet Engineering Task Force (IETF), its areas,
   and its working groups. Note that other groups may also distribute
   working documents as Internet-Drafts.

   Internet-Drafts are draft documents valid for a maximum of six
   months and may be updated, replaced, or obsoleted by other
   documents at any time. It is inappropriate to use Internet-
   Drafts as reference material or to cite them other than as
   "work in progress."

   To learn the current status of any Internet-Draft, please check
   the "1id-abstracts.txt" listing contained in the Internet-
   Drafts Shadow Directories on ds.internic.net (US East Coast),
   nic.nordu.net (Europe), ftp.isi.edu (US West Coast), or
   munnari.oz.au (Pacific Rim).

   Distribution of this document is unlimited.  Please send
   comments to the HTML working group (HTML-WG) of the
   Internet Engineering Task Force (IETF) at <html-wg@oclc.org>.
   Discussions of the group are archived at
   URL: http://www.acl.lanl.gov/HTML_WG/archives.html.

Abstract

   The markup language known as "HTML/2.0" provides for image maps.
   Image maps are document elements which allow clicking on different
   areas of an image to reference different network resources, as
   specified by Uniform Resource Locators (URIs).  The image map
   capability in HTML/2.0 is limited in several ways, such as the
   restriction that it only works with documents served via the "HTTP"
   protocol, and the lack of a viable fallback for users of text-only
   browsers.  This document specifies an extension to the HTML
   language, referred to as "Client-Side Image Maps," which resolves
   these limitations.

Table of Contents

   1.  Introduction
       1.1  Purpose
       1.2  Overall Operation
   2.  Client-Side Image Map Extension

J. Seidman                                                      Page 1

                     Client-side Image Maps             February 4, 1995


       2.1  Syntax
       2.2  Required Changes to HTML/2.0 DTD
       2.3  Backwards Compatibility
       2.4  Examples
   3.  References
   4.  Author's Address


1. Introduction

1.1  Purpose

   Image maps are an important feature of the point-and-click
   interface which makes the World Wide Web so popular. The most
   common use of image maps is to allow users to access different
   documents by clicking on different areas in an image.

   There are several limitations of the current image map
   implementation as it applies to this use. First, it only works
   over the HTTP protocol, making it unusable for reading local files
   or files accessed via alternate protocols. Second, a server
   transaction is required merely to determine where the link is
   directed. This can degrade performance noticeably when accessing
   distant sites. Third, unlike for normal links, there is no way for
   a browser to provide visual feedback to the user showing where a
   portion of an image map leads before the user actually clicks on
   it. Lastly, the method for specifying the active regions of image
   maps is server-dependent, compromising portability of documents.
   This extension to support client-side image maps addresses these
   issues.

   It is proposed that this extension be included in a future revision
   of the HTML specification.

1.2  Overall Operation

   Client-side image maps work by placing a complete representation of
   the active areas of an image, including their shape, size, and
   destination (URI), into an SGML-compliant textual form.  This
   markup may also optionally include a textual description for
   each area for display on non-textual browsers.  This
   representation, or "map," is given a name to identify it.

   When an image is included in an HTML document, it may include an
   attribute specifying a map to use.  The map may contained in the
   same file which references the image, but this it not required.
   If the map is in a different file, a URI to that file must be
   provided.

   The browser will parse the map and remember the contents.  When the

J. Seidman                                                      Page 2

                     Client-side Image Maps             February 4, 1995


   user clicks on the map, the browser will match up the location with
   the specified destination for that location and access that URI.
   In the case of a non-graphical browser, the browser could display
   the textual descriptions for each area instead of the image.
   Clicking on a given textual description would then go to the
   associated destination.


2. Client-Side Image Map Extension

2.1 Syntax

   Adding a USEMAP attribute to an IMG element indicates that it is a
   client-side image map.  The USEMAP attribute can be used with the
   ISMAP attribute to indicate that the the image can be processed as
   either a client-side or server-side image map.  The argument to
   USEMAP specifies which map to use with the image, by specifying the
   URI for the file containing the map, followed by a '#', followed by
   the name of the map.  If the argument to USEMAP starts with a '#',
   the map is assumed to be in the same document as the IMG tag.  The
   presence of a USEMAP attribute overrides the effect of an enclosing
   anchor (A) element.

   The different regions of the image are described using a MAP
   element.  The map describes each region in the image and indicates
   where it links to. The basic format for the MAP element is as
   follows:

   <MAP NAME="name">
   <AREA [SHAPE="shape"] COORDS="x,y,..." [HREF="reference"]
         [NOHREF] [ALT="alt"]>
   </MAP>

   The NAME attribute specifies the name of the map so that it can be
   referenced by an IMG element.  Each AREA element contained inside
   the map element specifies a single clickable area of the image.
   The SHAPE attribute gives the shape of this area.  Possible shapes
   are "RECT" and "CIRCLE", which specify rectangular and circular
   regions respectively.  If the SHAPE tag is omitted, SHAPE="RECT" is
   assumed.

   The COORDS tag describes the position of an area, using image
   pixels as the units with the origin at the upper-left corner of the
   image.  For a rectangle, the coordinates are given as
   "left,top,right,bottom".  The rectangular region defined includes
   the lower-right corner specified, i.e. to specify the entire area
   of a 100x100 image, the coordinates would be "0,0,99,99".  For a
   circular region, the coordinates are given as
   "center_x,center_y,radius", specifying the center and radius of the
   circle.

J. Seidman                                                      Page 3

                     Client-side Image Maps             February 4, 1995


   The NOHREF attribute indicates that clicks in this region should
   perform no action.  An HREF attribute specifies where a click in
   that area should lead.  A relative anchor specification will be
   expanded using the URI of the map description as a base, rather
   than using the URI of the document from which the map description
   is referenced. If a BASE tag is present in the document containing
   the map description, that URI will be used as the base.

   An arbitrary number of AREA tags may be specified.  If two areas
   intersect, the one which appears first in the map definition takes
   precedence in the overlapping region.  Multiple areas may share the
   same destination to create composite shapes.  Any portion of an
   image which is not described by an AREA tag defaults to having no
   action.

   The ALT attribute specifies optional text which describes a given
   area.  A text-only browser can display the textual contents for
   each area as a substitute for the image.

2.2  Required Changes to HTML/2.0 DTD

   The required changes to the HTML/2.0 DTD to support this syntax
   would be as follows:

      Change the IMG element definition to be:
        <!ELEMENT IMG    - O EMPTY>
        <!ATTLIST IMG
                SRC %URI; #REQUIRED
                ALT CDATA #IMPLIED
                ALIGN (top|middle|bottom) #IMPLIED
                ISMAP (ISMAP) #IMPLIED
                USEMAP %URI; #IMPLIED
        >

      Add the following new definitions:
        <!ELEMENT MAP    - - +(AREA)>
        <!ATTLIST MAP
                NAME %linkName; #REQUIRED
        >

        <!ELEMENT AREA   - O EMPTY>
        <!ATTLIST AREA
                SHAPE (RECT|CIRCLE) RECT #IMPLIED
                COORDS CDATA #REQUIRED
                HREF %URI; #IMPLIED
                NOHREF (NOHREF) #IMPLIED
                ALT CDATA #IMPLIED
        >


J. Seidman                                                      Page 4

                     Client-side Image Maps             February 4, 1995


2.3  Backwards Compatibility

   This extension is specifically designed to provide a variety of
   fallback options for browsers which do not support it.  These
   options are based on the assumption that browsers will ignore any
   attributes or elements which are not present in the HTML/2.0 DTD.

   An document can be written so that a client-side image map can have
   three different fallback behaviors.  First, the document can use
   the server-side image map capability, by specifying the ISMAP
   attribute as well as USEMAP.  In situations where this is possible,
   the image map will work whether or not the browser supports the
   client-side extension.

   Second, clicking on the image can direct the user to a single URI,
   regardless of where on the image he clicks.  This is accomplished
   by placing the image inside an anchor (A) element.  The fallback
   destination could provide the user with an error or a textual list
   of destinations.

   Lastly, the image can appear to not be a link at all (i.e. missing
   whatever visual cues a browser provides to indicate a hyperlink).
   This will be the result if the image element neither contains an
   ISMAP attribute nor is inside an anchor.

2.4  Examples

   The following three examples show markup demonstrating the three
   fallback mechanisms described in section 2.3:

      This image map will work with any graphical browser:
      <A HREF="/cgi-bin/imagemap/pic1">
      <IMG SRC="pic1.jpg" USEMAP="maps.html#map1" ISMAP></A>

      Clicking here will take you to a page with an error message if
      you don't have client-side image map support:
      <A HREF="no_csim.html">
      <IMG SRC="pic2.jpg" USEMAP="maps.html#map2"></A>

      You can only click here if your browser supports client-side
      image maps: <IMG SRC="pic3.jpg" USEMAP="maps.html#map3">

   The following example shows the use of a map in the same file as
   the image:

      <IMG SRC="picture.jpg" USEMAP="#mymap">

   The following example defines a simple map which describes an
   image with a circle in the middle overlapping two large

J. Seidman                                                      Page 5

                     Client-side Image Maps             February 4, 1995


   rectangles:

      <MAP NAME="welcomemap">
      <AREA SHAPE=CIRCLE COORDS="50,50,40" HREF="about_us.html"
            ALT="About our company">
      <AREA SHAPE=RECT COORDS="0,0,100,50" HREF="products.html"
            ALT="Our products">
      <AREA SHAPE=RECT COORDS="0,51,100,100" HREF="technology.html"
            ALT="Technology for the next century">
      </MAP>

3. References

   [1] T. Berners-Lee, D. Connolly.  "HyperText Markup Language
       Specification - 2.0" Internet-Draft (work in progress),
       November 28, 1994.

   [2] J. Seidman, "An HTML Extension to Support Client-Side Image
       Maps"  The Second International WWW Conference '94 Advance
       Proceedings, pp 927-930.

4. Author's Address

   James L. Seidman
   jim@spyglass.com
   Senior Software Engineer
   Spyglass, Inc.
   P.O. Box 6388
   Champaign, IL 61826-9962


J. Seidman                                                      Page 6


1	INTERNET-DRAFT James L. Seidman
2	<draft-ietf-html-clientsideimagemap-00.txt> Spyglass, Inc.
3	Expires SIX MONTHS FROM---> February 4, 1994
4
5	A Proposed Extension to HTML : Client-Side Image Maps
6
7	Status of this Memo
8
9	This document is an Internet-Draft. Internet-Drafts are working
10	documents of the Internet Engineering Task Force (IETF), its areas,
11	and its working groups. Note that other groups may also distribute
12	working documents as Internet-Drafts.
13
14	Internet-Drafts are draft documents valid for a maximum of six
15	months and may be updated, replaced, or obsoleted by other
16	documents at any time. It is inappropriate to use Internet-
17	Drafts as reference material or to cite them other than as
18	"work in progress."
19
20	To learn the current status of any Internet-Draft, please check
21	the "1id-abstracts.txt" listing contained in the Internet-
22	Drafts Shadow Directories on ds.internic.net (US East Coast),
23	nic.nordu.net (Europe), ftp.isi.edu (US West Coast), or
24	munnari.oz.au (Pacific Rim).
25
26	Distribution of this document is unlimited. Please send
27	comments to the HTML working group (HTML-WG) of the
28	Internet Engineering Task Force (IETF) at <html-wg@oclc.org>.
29	Discussions of the group are archived at
30	URL: http://www.acl.lanl.gov/HTML_WG/archives.html.
31
32	Abstract
33
34	The markup language known as "HTML/2.0" provides for image maps.
35	Image maps are document elements which allow clicking on different
36	areas of an image to reference different network resources, as
37	specified by Uniform Resource Locators (URIs). The image map
38	capability in HTML/2.0 is limited in several ways, such as the
39	restriction that it only works with documents served via the "HTTP"
40	protocol, and the lack of a viable fallback for users of text-only
41	browsers. This document specifies an extension to the HTML
42	language, referred to as "Client-Side Image Maps," which resolves
43	these limitations.
44
45	Table of Contents
46
47	1. Introduction
48	1.1 Purpose
49	1.2 Overall Operation
50	2. Client-Side Image Map Extension
51
52	J. Seidman Page 1
53
54	Client-side Image Maps February 4, 1995
55
56
57	2.1 Syntax
58	2.2 Required Changes to HTML/2.0 DTD
59	2.3 Backwards Compatibility
60	2.4 Examples
61	3. References
62	4. Author's Address
63
64
65	1. Introduction
66
67	1.1 Purpose
68
69	Image maps are an important feature of the point-and-click
70	interface which makes the World Wide Web so popular. The most
71	common use of image maps is to allow users to access different
72	documents by clicking on different areas in an image.
73
74	There are several limitations of the current image map
75	implementation as it applies to this use. First, it only works
76	over the HTTP protocol, making it unusable for reading local files
77	or files accessed via alternate protocols. Second, a server
78	transaction is required merely to determine where the link is
79	directed. This can degrade performance noticeably when accessing
80	distant sites. Third, unlike for normal links, there is no way for
81	a browser to provide visual feedback to the user showing where a
82	portion of an image map leads before the user actually clicks on
83	it. Lastly, the method for specifying the active regions of image
84	maps is server-dependent, compromising portability of documents.
85	This extension to support client-side image maps addresses these
86	issues.
87
88	It is proposed that this extension be included in a future revision
89	of the HTML specification.
90
91	1.2 Overall Operation
92
93	Client-side image maps work by placing a complete representation of
94	the active areas of an image, including their shape, size, and
95	destination (URI), into an SGML-compliant textual form. This
96	markup may also optionally include a textual description for
97	each area for display on non-textual browsers. This
98	representation, or "map," is given a name to identify it.
99
100	When an image is included in an HTML document, it may include an
101	attribute specifying a map to use. The map may contained in the
102	same file which references the image, but this it not required.
103	If the map is in a different file, a URI to that file must be
104	provided.
105
106	The browser will parse the map and remember the contents. When the
107
108	J. Seidman Page 2
109
110	Client-side Image Maps February 4, 1995
111
112
113	user clicks on the map, the browser will match up the location with
114	the specified destination for that location and access that URI.
115	In the case of a non-graphical browser, the browser could display
116	the textual descriptions for each area instead of the image.
117	Clicking on a given textual description would then go to the
118	associated destination.
119
120
121	2. Client-Side Image Map Extension
122
123	2.1 Syntax
124
125	Adding a USEMAP attribute to an IMG element indicates that it is a
126	client-side image map. The USEMAP attribute can be used with the
127	ISMAP attribute to indicate that the the image can be processed as
128	either a client-side or server-side image map. The argument to
129	USEMAP specifies which map to use with the image, by specifying the
130	URI for the file containing the map, followed by a '#', followed by
131	the name of the map. If the argument to USEMAP starts with a '#',
132	the map is assumed to be in the same document as the IMG tag. The
133	presence of a USEMAP attribute overrides the effect of an enclosing
134	anchor (A) element.
135
136	The different regions of the image are described using a MAP
137	element. The map describes each region in the image and indicates
138	where it links to. The basic format for the MAP element is as
139	follows:
140
141	<MAP NAME="name">
142	<AREA [SHAPE="shape"] COORDS="x,y,..." [HREF="reference"]
143	[NOHREF] [ALT="alt"]>
144	</MAP>
145
146	The NAME attribute specifies the name of the map so that it can be
147	referenced by an IMG element. Each AREA element contained inside
148	the map element specifies a single clickable area of the image.
149	The SHAPE attribute gives the shape of this area. Possible shapes
150	are "RECT" and "CIRCLE", which specify rectangular and circular
151	regions respectively. If the SHAPE tag is omitted, SHAPE="RECT" is
152	assumed.
153
154	The COORDS tag describes the position of an area, using image
155	pixels as the units with the origin at the upper-left corner of the
156	image. For a rectangle, the coordinates are given as
157	"left,top,right,bottom". The rectangular region defined includes
158	the lower-right corner specified, i.e. to specify the entire area
159	of a 100x100 image, the coordinates would be "0,0,99,99". For a
160	circular region, the coordinates are given as
161	"center_x,center_y,radius", specifying the center and radius of the
162	circle.
163
164	J. Seidman Page 3
165
166	Client-side Image Maps February 4, 1995
167
168
169
170	The NOHREF attribute indicates that clicks in this region should
171	perform no action. An HREF attribute specifies where a click in
172	that area should lead. A relative anchor specification will be
173	expanded using the URI of the map description as a base, rather
174	than using the URI of the document from which the map description
175	is referenced. If a BASE tag is present in the document containing
176	the map description, that URI will be used as the base.
177
178	An arbitrary number of AREA tags may be specified. If two areas
179	intersect, the one which appears first in the map definition takes
180	precedence in the overlapping region. Multiple areas may share the
181	same destination to create composite shapes. Any portion of an
182	image which is not described by an AREA tag defaults to having no
183	action.
184
185	The ALT attribute specifies optional text which describes a given
186	area. A text-only browser can display the textual contents for
187	each area as a substitute for the image.
188
189	2.2 Required Changes to HTML/2.0 DTD
190
191	The required changes to the HTML/2.0 DTD to support this syntax
192	would be as follows:
193
194	Change the IMG element definition to be:
195	<!ELEMENT IMG - O EMPTY>
196	<!ATTLIST IMG
197	SRC %URI; #REQUIRED
198	ALT CDATA #IMPLIED
199	ALIGN (top\|middle\|bottom) #IMPLIED
200	ISMAP (ISMAP) #IMPLIED
201	USEMAP %URI; #IMPLIED
202	>
203
204	Add the following new definitions:
205	<!ELEMENT MAP - - +(AREA)>
206	<!ATTLIST MAP
207	NAME %linkName; #REQUIRED
208	>
209
210	<!ELEMENT AREA - O EMPTY>
211	<!ATTLIST AREA
212	SHAPE (RECT\|CIRCLE) RECT #IMPLIED
213	COORDS CDATA #REQUIRED
214	HREF %URI; #IMPLIED
215	NOHREF (NOHREF) #IMPLIED
216	ALT CDATA #IMPLIED
217	>
218
219
220	J. Seidman Page 4
221
222	Client-side Image Maps February 4, 1995
223
224
225
226	2.3 Backwards Compatibility
227
228	This extension is specifically designed to provide a variety of
229	fallback options for browsers which do not support it. These
230	options are based on the assumption that browsers will ignore any
231	attributes or elements which are not present in the HTML/2.0 DTD.
232
233	An document can be written so that a client-side image map can have
234	three different fallback behaviors. First, the document can use
235	the server-side image map capability, by specifying the ISMAP
236	attribute as well as USEMAP. In situations where this is possible,
237	the image map will work whether or not the browser supports the
238	client-side extension.
239
240	Second, clicking on the image can direct the user to a single URI,
241	regardless of where on the image he clicks. This is accomplished
242	by placing the image inside an anchor (A) element. The fallback
243	destination could provide the user with an error or a textual list
244	of destinations.
245
246	Lastly, the image can appear to not be a link at all (i.e. missing
247	whatever visual cues a browser provides to indicate a hyperlink).
248	This will be the result if the image element neither contains an
249	ISMAP attribute nor is inside an anchor.
250
251	2.4 Examples
252
253	The following three examples show markup demonstrating the three
254	fallback mechanisms described in section 2.3:
255
256	This image map will work with any graphical browser:
257	<A HREF="/cgi-bin/imagemap/pic1">
258	<IMG SRC="pic1.jpg" USEMAP="maps.html#map1" ISMAP></A>
259
260	Clicking here will take you to a page with an error message if
261	you don't have client-side image map support:
262	<A HREF="no_csim.html">
263	<IMG SRC="pic2.jpg" USEMAP="maps.html#map2"></A>
264
265	You can only click here if your browser supports client-side
266	image maps: <IMG SRC="pic3.jpg" USEMAP="maps.html#map3">
267
268	The following example shows the use of a map in the same file as
269	the image:
270
271	<IMG SRC="picture.jpg" USEMAP="#mymap">
272
273	The following example defines a simple map which describes an
274	image with a circle in the middle overlapping two large
275
276	J. Seidman Page 5
277
278	Client-side Image Maps February 4, 1995
279
280
281	rectangles:
282
283	<MAP NAME="welcomemap">
284	<AREA SHAPE=CIRCLE COORDS="50,50,40" HREF="about_us.html"
285	ALT="About our company">
286	<AREA SHAPE=RECT COORDS="0,0,100,50" HREF="products.html"
287	ALT="Our products">
288	<AREA SHAPE=RECT COORDS="0,51,100,100" HREF="technology.html"
289	ALT="Technology for the next century">
290	</MAP>
291
292	3. References
293
294	[1] T. Berners-Lee, D. Connolly. "HyperText Markup Language
295	Specification - 2.0" Internet-Draft (work in progress),
296	November 28, 1994.
297
298	[2] J. Seidman, "An HTML Extension to Support Client-Side Image
299	Maps" The Second International WWW Conference '94 Advance
300	Proceedings, pp 927-930.
301
302	4. Author's Address
303
304	James L. Seidman
305	jim@spyglass.com
306	Senior Software Engineer
307	Spyglass, Inc.
308	P.O. Box 6388
309	Champaign, IL 61826-9962
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332	J. Seidman Page 6
333
334
335