Handling Hyperlinks and Images in HTML - 2.8 Images Are Special
(Page 2 of 5 )
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, PNG, and JPEG--and the graphical browsers have built-in decoders that integrate those image types into your document.*
2.8.1 Inline Images
The HTML/XHTML tag for inline images is <img>; its required src attribute is the image file that you want to display in the document. [<img>, 5.2.6]
The browser separately loads images and places them into the text flow as though 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 CSS align property, whose value you set to put the image at the top, middle, or bottom of adjacent text. Examine Figures 2-2 through 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
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* commonly add custom list bullets or more distinctive section dividers than the conventional horizontal
Figure 2-4. An inline image specially aligned with the top of the text
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.
We also should mention the alt attribute. Give it some text value that explains the image display for those who have disabled image display, or for browsers that may be able to read to the disabled user.
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. [Server-side considerations, 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.
Instead of depending on a web server, the usemap attribute for the <img> tag, with the <map> and <area> tags, allows authors to embed 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. [Client-Side Image Maps, 6.5.2]
Next: 2.9 Lists, Searchable Documents, and Forms >>
More HTML Articles
More By O'Reilly Media
|
 This article is excerpted from chapter two of HTML & XHTML: The Definitive Guide, Sixth Edition, written by Chuck Musciano and Bill Kennedy (O'Reilly; ISBN: 0596527322). Check it out today at your favorite bookstore. Buy this book now.
|
|
/ 3 
