Inline Images

The HTML tag for inline images provides <img> whose required src attribute is the URL of the GIF or JPEG image you want to insert in the document. [<img>, 5.2.6]

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. Or you may place an image by itself by including preceding and following paragraph or line-break tags.

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 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.

Image Maps

Image maps are images within an anchor with a special attribute: they may contain more than one hyperlink.

The HTML standard image map is enabled 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 HTML document. [ismap, 6.5.1]

A good example of the use of an image map might be to locate a hotel while traveling. The user clicks on a map of the region they intend to visit, for instance, and your image map's server program might return the names, addresses, and phone numbers of local accommodations.

While very powerful and visually appealing, these standard so-called server-side image maps mean that HTML 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. Recent innovations in browser software remove those barriers by enabling client-side image maps.

Rather than depending on a Web server, the special usemap attribute extension to the <img> tag and new <map> and <area> extensions let HTML authors embed all the information the browser needs to process an image map in the same document as the image. Client-side image maps are not part of standard HTML, and are not supported by most browsers. But of all the nonstandard features that emerge seemingly daily in one new browser or another, client-side image maps probably will be one of the most popular. [usemap, 6.5.2]