2.8 Images Are Special
Image
files are multimedia elements that you can reference with anchors in
your document for separate download and display by the browser. But,
unlike other multimedia, standard HTML and XHTML have an explicit
provision for image display
"inline" with the text, and images
can serve as intricate maps of hyperlinks. That's
because there is some consensus in the industry concerning image file
formats specifically, GIF and JPEG and the graphical
browsers have built-in decoders that integrate those image types into
your document.[8]
[8] Some browsers support other multimedia
besides GIF and JPEG graphics for inline display.
Internet Explorer, for instance,
supports a tag that plays background audio. In addition, the HTML 4
and XHTML standards provide a way to display other types of
multimedia inline with document text through a general tag.
2.8.1 Inline Images
The HTML/XHTML tag for
inline images is <img>; its required
src
attribute is the URL of the GIF or JPEG image you want to insert in
the document. [<img>]
The browser separately loads images and places them into the text
flow as if the image were some special, albeit sometimes very large,
character. Normally, that means the browser aligns the bottom of the
image to the bottom of the current line of text. You can change that
with the special <img>
align
attribute, whose value you set to put the image at the
top, middle, or
bottom of adjacent text. Examine Figure 2-2 through Figure 2-4 for the
image alignment you prefer. Of course, wide images may take up the
whole line and hence break the text flow. You can also place an image
by itself, by including preceding and following division, paragraph,
or line-break tags.
Figure 2-2. An inline image aligned with the bottom of the text (default)

Figure 2-3. An inline image specially aligned with the middle of the text

Figure 2-4. An inline image specially aligned with the top of the text

Experienced HTML authors use images not only as supporting
illustrations, but also as quite small inline characters or glyphs,
added to aid browsing readers' eyes and to highlight
sections of the documents. Veteran HTML authors[9]
commonly add custom list bullets or more distinctive section dividers
than the conventional horizontal rules. Images, too, may be included
in a hyperlink, so that users may select an inline thumbnail sketch
to download a full-screen image. The possibilities with inline images
are endless.
[9] XHTML
is too new to call anyone a veteran or
experienced XHTML author.
2.8.2 Image Maps
Image maps
are images within an anchor with a special attribute: they may
contain more than one hyperlink.
One way to enable an image map is by adding the
ismap attribute to an
<img> tag placed inside an anchor tag
(<a>). When the user clicks somewhere in the
image, the graphical browser sends the relative x,y coordinates of
the mouse position to the server that is also designated in the
anchor. A special server program then translates the image
coordinates into some special action, such as downloading another
document. [Section 6.5.1.1]
A good example of the use of an image map might be to locate a hotel
while traveling. For example, when the user clicks on a map of the
region he intends to visit, your image map's server
program might return the names, addresses, and phone numbers of local
accommodations.
While they are very powerful and visually appealing, these so-called
server-side image maps mean that authors must
have some access to the map's coordinate-processing
program on the server. Many authors don't even have
access to the server, let alone a program on the server. A better
solution is to take advantage of
client-side image maps.
Rather than depending on a web server, the
usemap
attribute for the <img> tag, along with the
<map> and
<area> tags, allows authors to embed all the
information the browser needs to process an image map in the same
document as the image. Because of their reduced network bandwidth and
server independence, the client-side image maps are popular among
document authors and system administrators
alike. [Section 6.5.2]