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