Server-side image maps

The section on server-side image maps within the HTML4.0 Working Draft is
awfully confusing (and confused).  This email contains the section on
server-side image maps from the HTML3.2 Reference Specification for
comparison, some comments on the HTML4.0 Working Draft version of this
section, suggested replacement paragraphs and a discussion on the inclusion
of the ismap attribute within OBJECT, A and AREA elements.  Apologies if
this has already been covered.

----

As far as I understand it, server-side image maps are defined by having a
link around an IMG which has the ismap attribute defined within it.  The
href attribute of the link gives the URL of some server-side script which
decodes the click location to redirect the browser to another page.  This
seems to be what the HTML3.2 Reference Specification indicates:

From: http://www.w3.org.TR/REC-html32.html#img

>IMG - Inline images
>-------------------
[...snip...]
>ismap
>    When the IMG element is part of a hypertext link, and the user
>    clicks on the image, the ISMAP attribute causes the location to
>    be passed to the server.  This mechanism causes problems for
>    text-only and speech-based user agents.  Whenever its [sic] possible
>    to do so use the MAP element instead.
>
>Here is an example of how you use ISMAP:
>
><a href="/cgibin/navbar.map"><img src=navbar.gif ismap border=0></a>
>
>The location clicked is passed to the server as follows.  The user agent
>derives a new URL from the URL specified by the HREF attribute by appending
>'?' the x coordinate ',' and the y coordinate of the location in pixels.
>The link is then followed using the new URL.  For instance, if the user
>clicked at the location x=10, y=27 then the derived URL will be:
>"/cgibin/navbar.map?10,27".  It is generally a good idea to suppress the
>border and use graphical idioms to indicate that the image is clickable.

----

The HTML4.0 Working Draft tells a different story:

From: http://www.w3.org/TR/WD-html40/struct/includes.html#h-7.7.5.3

>Server-side image maps 
>----------------------
>
>Server-side image maps may be interesting in cases where the image map is
>too complicated for a
>client-side image map.
>
>It is only possible to define a server-side image map with the IMG element.
>To do so, set the boolean
>attribute ismap in the IMG definition. The associated map of regions must
>be specified with the usemap
>attribute.

The first statement, that it is only possible to define a server-side image
map with the IMG element, is wrong - you can also do it with the INPUT
element with type="image".  (See
http://www.w3.org/TR/WD-html40/interact/forms.html#input-types)

As for the rest, is there now no need for a link around the image?  Does
the usemap attribute now specify the location of the server-side script
which deals with the image coordinates?  If so, isn't this horribly
un-backwards-compatible, and what about when you want to give *both* a
server-side and client-side map?

>When the user activates a region of the image map, the screen coordinates
>are sent directly to the
>server where the document resides. Screen coordinates are expressed as
>screen pixel values. For
>normative information about the definition of a pixel and how to scale it,
>please consult [CSS1].
>
>The location clicked is passed to the server as follows. The user agent
>derives a new URL from the URL
>specified by the href attribute by appending `?' followed by the x and y
>coordinates, separated by a
>comma. The link is then followed using the new URL. For instance, in the
>previous example, if the user
>clicks at at the location x=10, y=27 then the derived URL is
>"/cgibin/navbar.map?10,27".

This is a direct lift from the HTML3.2 Reference Specification.  Given the
context, it would perhaps be best to refer to 'the href attribute within
the surrounding link' rather than simply 'the href attribute' - otherwise
those new to HTML might be confused into thinking that the IMG element can
take an href attribute.

The HTML3.2 Reference Specification also has the advantage of preceding
this paragraph with an example that makes sense of the derivation of the
"/cgibin/navbar.map?10,27" URL.  Perhaps that example should also be
included within this specification?

>In the following example, the first active region defines a client-side
>link. The second defines a
>server-side link, but doesn't assign a specific shape to it (this is
>accomplished with the "default" value
>of the shape attribute). Since the regions of the two links overlap, the
>first takes precedence of the
>later definition. Thus, a click anywhere but in the rectangle will cause
>the click's coordinates to be sent
>to the server.
>
><OBJECT data="game.gif" shapes>
>  <A href="guide.html" shape="rect" coords="0,0,118,28">
>        Rules of the Game</A>
>  <A href="http://www.acme.com/cgi-bin/competition"
>        ismap
>        shape="default">
>        Guess the location</a>
></OBJECT>

I have no idea what to make of this example.  According to the DTD, there
is no ismap attribute of the A element.  And according to a previous
paragraph, "It is only possible to define a server-side image map with the
IMG element."

Perhaps it's meant to be:

<OBJECT data="game.gif" shapes>
  <A href="guide.html" shape="rect" coords="0,0,118,28">
        Rules of the Game</A>
  <A href="http://www.acme.com/cgi-bin/competition"
        shape="default">
        <IMG src="game.gif" border="0"
             ismap
	     alt="Guess the location"></A>
</OBJECT>

but even that would not lead to the described behaviour, unless the OBJECT
element's contents should also be scanned for 'ismap' IMGs to indicate
whether they should append the click coordinates to the destination URL?
(See http://www.w3.org/TR/WD-html40/struct/includes.html#adef-shapes)

To summarise, the problems with this section are:
1) There is no mention of a need for a link to surround an IMG in order for
it to be a server-side image map.
2) The working draft wrongly (?) states that the usemap attribute must be
given to specify the 'associated map of regions', whereas this should
actually be given within the href attribute of the surrounding link.
3) There is no mention of the possibility of using the INPUT element to
give a similar effect.
4) The example gives illegal markup (an ismap attribute within an A tag)
5) The described effect given for the example is impossible (?) to attain
(which in itself might be a source of concern - should the described effect
be one that *should* be supported?  In which case, is there a need for
OBJECT/A/AREA elements to take an ismap attribute?)

----

A possible replacement section might read:

Server-side image maps 
----------------------

Server-side image maps may be interesting in cases where the image map is
too complicated for a client-side image map, such as when the destinations
of areas alter according to a variable which is only known to the server.
However, this method causes problems for text-based and speech-based user
agents.  Whenever it is possible to do so, client-side image maps should be
used instead.

Server-side image maps can be defined either with the IMG element or with
the INPUT element.  The use of the INPUT element for server-side image maps
is described in the section on forms.

To define a server-side image map with the IMG element, surround the image
with a link and set the boolean attribute ismap in the IMG definition.  The
href attribute of the link must specify a script which can handle the
resultant click location.  For example:

<A href="cgibin/navbar.map"><IMG src="navbar.gif" ismap></A>

The location clicked is passed to the server as follows. The user agent
derives a new URL from the URL specified by the href attribute of the A tag
by appending `?' followed by the x and y coordinates, separated by a comma.
(Screen coordinates are expressed as screen pixel values. For normative
information about the definition of a pixel and how to scale it, please
consult [CSS1].)  The link is then followed using the new URL. For
instance, in the previous example, if the user clicks at at the location
x=10, y=27 then the derived URL is "/cgibin/navbar.map?10,27".

End.

----

If the OBJECT element should be used in favour of the IMG element (due to
its richer content/alternative text) and there is to continue to be support
for server-side image maps within HTML, should there be an ismap attribute
on one or all of the OBJECT, A and AREA elements?

Having an ismap attribute for the OBJECT element would give it the same
functionality as the IMG element.  In fact, because the OBJECT element can
contain links, those using text- or speech-based could gain a
functionally-similar alternative to the image map.  Perhaps (I'm going way
over the top here), a third attribute could be added to the coordinates -
time.  This would enable clicks within movies/animations which could be
parsed by the server.  Or perhaps not.

Having an ismap attribute on AREA elements would enable a client-side
'filtering' of areas before sending the location of the click to the
server.  For example:

<IMG src="navigation.gif" usemap="#map1">
<MAP name="map1">
  <AREA href="guide.html" alt="Access Guide"
        shape="rect" coords="0,0,118,28">
  <AREA href="search.html" alt="Search"
        shape="rect" coords="184,0,276,28">
  <AREA href="shortcut.html" alt="Go"
        shape="circ" coords="184,200,60">
  <AREA href="top10.html" alt="Top Ten"
        shape="poly" coords="276, 0, 373, 28, 50, 50, 276, 0">
  <AREA href="/cgibin/user.map" alt="Your Preferences"
        shape="rect" coords="118,0,184,28"
        ismap>
</MAP>

By extension, if the AREA element has an ismap attribute, so should the A
element, so that MAP specifications can be changed into OBJECT
specifications.  So the above HTML could be also given as:

<OBJECT data="navigation.gif" shapes>
  <A href="guide.html" shape="rect" coords="0,0,118,28">
     Access Guide</A> |
  <A href="search.html" shape="rect" coords="184,0,276,28">
     Search</A> |
  <A href="shortcut.html" shape="circ" coords="184,200,60">
     Go</A> |
  <A href="top10.html" shape="poly" coords="276, 0, 373, 28, 50, 50, 276, 0">
     Top Ten</A> |
  <A href="/cgibin/user.map" shape="rect" coords="118,0,184,28" ismap>
     Your Preferences</A>
</OBJECT>

----

Any comments?

Jeni

Jeni Tennison
Department of Psychology, University of Nottingham
University Park, Nottingham NG7 2RD, UK
tel: +44 (0) 115 951 5151 x8352
fax: +44 (0) 115 951 5361
url: http://www.psychology.nottingham.ac.uk/staff/Jenifer.Tennison/

Received on Monday, 18 August 1997 12:58:34 UTC