Images
[Top] [Up] [Next] [Previous]

5.9 - Images


Images can be included as character like elements with text flowing around the image, e.g.

This example is produced by the following piece of HTML+

<p><img align=top src="http://spoof.cern.ch/people/tbl.gif"> Before 
coming to CERN, Tim worked on, among other things, document production
and text processing. He developed his first hypertext system, 
"Enquire",in 1980 for his own use (although unaware of the existence 
of the term HyperText). With a background in text processing, 
real-time software and communications, Tim decided that high energy 
physics needed a networked hypertext system and CERN was an ideal 
site for the development of wide-area hypertext ideas. Tim started 
the WorldWideWeb project at CERN in 1989. He wrote the application on 
the NeXT along with most of the communications software.
The IMG element specifies an image via a URL. The ALIGN=TOP attribute ensures that the top of the image is level with the top of the current text line. You can also use ALIGN=MIDDLE to align the center of the image with that of the current text line, and ALIGN=BOTTOM to align the bottom of the image with the bottom of the current text line. Browsers are not expected to apply text flow retrospectively, so using ALIGN=MIDDLE and ALIGN=BOTTOM may overwrite previous lines of text. If the ALIGN attribute is missing then ALIGN=TOP is assumed.

Not all display types can show images. The IMAGE element behaves in the same way as IMG*1 but allows you to include descriptive text, which can be shown on text-only displays:

<image align=top src="http://spoof.cern.ch/people/tbl.gif">A photo of
 Tim Berners-Lee</image> Before coming to CERN, Tim worked on, among
 other things, document production and text processing. etc.
On text-only displays, the text within the IMAGE element can be shown in place of the image:

[A photo of Tim Berners-Lee] Before coming to CERN, Tim worked on, 
among other things, document production and text processing. etc.
The SEETHRU attribute can be used to designate a chromakey so that the image background matches the document background. This is an experimental feature and the format of the attribute's value has yet to be defined - suggestions are welcomed.

Images can be made active in one of three ways

Making the entire image into an iconic hypertext button is simple:

<a href="bigpic.giff"><image src="smallpic.gif">Our house</image></a>
In this example, readers can click on a small picture embedded in the document to see a larger version, which would take significantly longer to retrieve. When using images as hypertext links, don't forget to include a textual description. This is needed for the link caption for people using text-only displays.

In some cases, servers can handle mouse clicks or drags on the image. This capability is signalled in the header information returned along with the image data. You can also use the ISMAP attribute. This mechanism and the ability to add shaped buttons are defined in detail in the description of figures.

The delay in connecting to the server for each image in turn can be reduced by asking HTTP servers to include images with the HTML+ document as a MIME multipart message (include multipart/mixed with the Accept: header in the request message).


HTML+ Discussion Document - November 8, 1993

[Top] [Up] [Next] [Previous]