Text on Image for HTML+

Dave_Raggett ([email protected])
Fri, 25 Jun 93 11:21:23 BST


Marc says:

> Hi Dave, got a user request for this...

> * text on top of an image background or in a colored background box
> which sits arbitrarily on top of an image background.

> I'm ambivalent; it might be overkill. On the other hand, it would be
> neat.

OK how about this:

A new tag FIGT which allows you to position arbitrary text at a given
point in the image. The optional "BOX" attribute requests the browser to draw
a background box (obscuring the image). You can choose to make the whole of
the box into a hypertext link, or to use the A tag for designated parts of
the text. The optional "WIDTH" attribute allows you to limit the width of
the box. By default, the browser will make the width equal the lesser of the
length of the text string or the right most extent of the image.

I have also switched back to having the upper left as (0,0). Furthermore,
to provide backwards compatibility with servers supporting X Mosaic's ISMAP
feature, I have added the "PIX" attribute to FIG. This switches the coordinate
scheme to pixels for the scope of the figure, i.e. for FIGA, FIGT and sending
mouse clicks to the server.

This will make it practical to automatically convert HTML documents into
the HTML+ format, so that we can painlessly switch to the new DTD.

Cheers,

Dave Raggett

n.b. I have ditched "ISMAP" in favour of "MAP" to ensure people realise
that the mechanism is not the same (i.e. it defaults to scaled coords).

----------- DTD snippet for figures ---------------------------------------

<!-- Figures

Figures can be fixed to the point in the text flow where
they should appear or may float relative to the text.

The image/drawing is specified by a URL or as embedded
data for simple drawings. The elements text serves
as the caption. Use the CREDIT emphasis to record
photo credits etc.

Mouse clicks can be handled by server (MAP) or browser (FIGA)
The coordinate scheme is (0,0) for upper left and (1,1)
for the lower right of the figure with X to the right
and Y up the "page". When sending clicks to the server
append to URL as in: URL?X,Y

The PIX attribute switches the coordinate scheme to
pixel values with (0,0) as the top left. This is intended
to provide backwards compatibility with servers that
support X Mosaic's ISMAP feature.

For backwards compatibility with servers which support
X Mosaic's ISMAP feature

Clicks on areas designated with FIGA should take
preference over handling by the server.

FIGT allows you to position text over the figure.
-->

<!ELEMENT FIG - - (EMBED?, (FIGA|FIGT)*, (%text;)*)>
<!ATTLIST FIG
id ID #IMPLIED
float (float) #IMPLIED -- fixed or floating figures --
map (map) #IMPLIED -- server can handle mouse clicks --
pix (pix) #IMPLIED -- use pixel coordinates --
src %URL; #IMPLIED -- link to image data -->

<!-- Figure anchors designate polygonal areas on the figure
which can be clicked with the mouse. The default area
is the whole of the figure. This mechanism interprets
mouse clicks locally, and browsers can choose to highlight
the designated area (or change the mouse sprite) when the
mouse is moved over the area.

Note that polygons may be non-convex or even intersect
themselves, thereby complicating the definition of what
is enclosed by the polygon. Holes are excluded.
-->

<!ELEMENT FIGA - O (EMPTY)>
<!ATTLIST FIGA
href %URL; #REQUIRED -- link to traverse when clicked --
area NUMBERS #IMPLIED -- x1,y1,x2,y2,x3,y3,... -->

<!-- Text on top of an figure background, or in a colored background
box which sits arbitrarily on top of an figure background.
The text can include headers, lists and tables etc. The width
attribute allows you to limit the width of the text box. The
height is then determined automatically by the browser.

You can make the whole of the box into a hypertext link.
-->

<!ELEMENT FIGT - - (%main;)>
<!ATTLIST FIGT
at NUMBERS #IMPLIED -- upper left origin for text --
box (box) #IMPLIED -- draw background coloured box --
width NUMBER #IMPLIED -- given in average char widths --
href %URL; #REQUIRED -- link to traverse when clicked -->