The img element displays a graphical image in whatever MIME types the browser is equipped to handle. Common image types are GIF and JPEG, but modern browsers are frequently capable of decoding bitmapped images in PNG and BMP formats (unless helper application settings reroute those file types to external applications). img elements are inline elements, appearing anywhere in the document you specify, including in the middle of a line of text. A large number of attributes affecting visual presentation of the element are deprecated in HTML 4 in favor of style sheet rules. You will be able to use the attributes safely for many browser generations to come, however, because of the need to be backward compatible with the large collection of image-laden documents already on the Web. Note, too, that if you intend to use style sheets for img element borders and margins in Navigator 4, you must wrap the img element inside div or span elements and assign the style sheets to the surrounding element. This workaround works with all other CSS-aware browsers, so you can use style sheets in cross-browser deployment.

If you want to make an entire image a clickable link, wrap the img element inside an a element. To eliminate the typical link border around the image, set the border attribute to 0. And for image maps (where different segments of an image link to different destinations), the HTML recommendation encourages the use of client-side image maps (via the usemap attribute) over the server-side image map (ismap). For nonlinking action, you can assign an onclick event handler to an image in IE 4 and later and Netscape 6. The downside is that you'll have to control the cursor style with other events because the :hover pseudo-class works reliably (if at all) only on a elements.

To be backward compatible with earlier scriptable browsers, it is advisable to include height and width attribute assignments in all img element tags. When values are assigned to these attributes, the browser renders pages more quickly because it doesn't have to wait for the image to load in order to determine its size and organize other content on the page.

Determines how the img element is rendered in physical relation to the element's next outermost container and surrounding content. Some settings also let you "float" the image to the left or right margin and let surrounding text wrap around the image (but no wrapping with a centered image).

Most of the rules for alignment-constant values cited at the beginning of this chapter apply to the img element. Typically, align attributes are deprecated in HTML 4 in favor of the style sheet attributes. But if you require backward compatibility for your document, stick with the align attribute.

In a world littered with graphical browsers, it is often hard to remember that not every browser downloads images or that not every web surfer can see the images. Aside from those using VT100 terminals with browsers such as Lynx, pocket computers often offer better performance when images don't have to be downloaded and rendered. Vision impaired users may not be able to see an image, but could benefit by knowing what an image is about. Text-only browsers display the text assigned to an img element's alt attribute where the img element appears on the page. Browsers that speak the page's text also speak the alt text. The alt attribute should contain a brief description of what the image is (or an empty string for images used as space fillers). The HTML recommendation considers this capability so important that it calls the alt attribute a requirement for the img element.

Controls the thickness of a border around an img element. Default rendering of the border is in black, but if the img element is wrapped inside an a element, the border takes on the document's various link colors (depending on link state). If you want a different color for a plain border, use style sheets (with the appropriate div or span wrapper for Navigator 4). When a link surrounds the image, you can eliminate the colored border altogether by setting the border attribute value to zero.

Used with IE data binding to associate a remote data source column name with the src attribute URL of an img element. A datasrc attribute must also be set for the img element. Works only with text file data sources in IE 5/Mac.

Used with IE data binding to specify the ID of the page's object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute. Works only with text file data sources in IE 5/Mac.

Internet Explorer 4 and later allows video clips (and VRML) to be displayed via the img element (as an alternate to the embed or object element). To help the browser differentiate between a dynamic and static image source, you use the dynsrc attribute in place of the src attribute to load the video clip. All other visual aspects of the img element are therefore immediately applicable to the rectangular region devoted to playing the video clip. See also the loop attribute for controlling the frequency of clip play and the start attribute.

Sets whether images that are at least 130 pixels high and wide display the Windows OS "My Pictures" toolbar during mouse rollovers. This tool bar provides quick-click shortcuts to save, print, or email the image. You cannot control which buttons appear in the toolbar.

Define the dimensions for the space on the page reserved for the image, regardless of the actual size of the image. For best performance (and backward script compatibility), you should set these attributes to the actual pixel height and width of the source image. If you supply a different measure, the browser scales the image (not very well) to fit the space defined by these attributes.

Define a margin that acts as whitespace padding around the visual content of the img element. The hspace establishes a margin on the left and right sides of the image rectangle; the vspace establishes a margin on the top and bottom sides of the image rectangle. Both attributes are deprecated in HTML 4 in favor of the margin- or padding-related CSS attributes.

A unique identifier that distinguishes this element from all the rest in the document. Can be used to associate a single element with a style rule naming this attribute value as an ID selector. An element can have an ID assigned for uniqueness as well as a class for inclusion within a group. See Chapter 3.

IE 4 and later and Netscape 6 allow id attributes for nonrenderable elements, but if your code requires validation, be aware that the W3C HTML 4 and XHTML DTDs do not. Because all W3C DOM elements have an id property, it is natural to assign an id attribute to non-renderable elements if scripts must reference those elements. Or, your scripts may use other ways (e.g., the array returned by document.getElementsByTagName( )) to reference such elements.

Assign identifiers to id attributes in order to duplicate values previously only assigned to name attributes in elements that feature the name attribute. Current browser form controls still require name attributes for name/value pairs to be submitted with the form, and a elements acting as anchors still need name attributes. Be sure to assign an identifier to the id attribute of any element you intend to reference by script.

The Boolean ismap attribute tells the browser that the img element is acting as a server-side image map. To turn an image into a server-side image map, wrap the img element with an a element whose href attribute points to the URL of the CGI program that knows how to interpret the click coordinate information. The browser appends coordinate information about the click to the URL like a GET form method appends form element data to the action attribute URL. In the following example, if a user clicks at the coordinate point 50, 25, the browser sends "http://www.giantco.com/cgi-bin/nav.pl?50,25" to the server. A server CGI program named nav.pl might examine the region in which the coordinate point appears and send the relevant HTML back to the client.

More recent browsers allow client-side image maps (see the usemap attribute), which operate more quickly for the user because there is no communication with the server to carry out the examination of the click coordinate point.

The language being used for the element's attribute values and content. A browser can use this information to assist in proper rendering of content with respect to details such as treatment of ligatures (when supported by a particular font or required by a written language), quotation marks, and hyphenation. Other applications and search engines might use this information to aid the selection of spell-checking dictionaries and the creation of indices.

Specifies a URL of a document that contains a longer description of the element than what the content of the alt or title attributes reveal. One application of this attribute in future browsers is to retrieve an annotated description of the element for users who cannot read the browser screen. The Properties choice for Netscape 6's context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Version 6 browsers provide no other functionality for this attribute.

If you specify a video clip with the dynsrc attribute, the loop attribute controls how many times the clip should play ("loop") after it loads. If you set the value to zero, the clip loads but does not play initially. Video clips that are not currently running play when the user double-clicks on the image, but you may need to provide instructions for that on the page because there are no other obvious controls. This attribute does not control animated .gif playback.

Both Navigator and Internet Explorer recognize the fact that not everyone has a fast Internet connection and that high-resolution images can take a long time to download to the client. To fill the void, the lowsrc attribute lets the author specify a URL of a lower-resolution (or alternate) image to download into the document space first. The lowsrc image should be the same pixel size as the primary src image.

If you are scripting an image (especially swapping precached images), backward-compatible scripting utilizes the name attribute value to reference the img object because the id attribute did not exist. References by name are more reliable than by numeric index within the document.images array because you can rearrange or delete images at any time and still maintain references to the remaining named images. For modern browsers only, you can use the id attribute value in place of the name attribute.

URL to a file containing image data that is displayed through the img element. With the exception of specifying a dynsrc attribute in Internet Explorer for video clips or datasrc for IE data binding, the src attribute is required if you want to see any image in the img element space. The browser must be equipped to handle the image MIME type. On the World Wide Web, the most common image formats are GIF and JPEG. HTML or XHTML validation, of course, requires the src attribute and doesn't accept the IE attribute alternatives.

Whenever you set the dynsrc attribute of an img to display a video clip in Internet Explorer, you can direct the element to start playing the video immediately after the video file loads or when the user rolls the cursor over the image. The start attribute lets you decide the best user interface for your page.

This attribute lets you set one or more style sheet rule property assignments for the current element. You may use the CSS or (for Navigator 4 only) JavaScript syntax for assigning style attributes. Use the style attribute only with visible (renderable) elements.

When engaged, this attribute prevents Navigator 4 from displaying the generic image icon, alt text, and raised image area while the image is downloading. If the image fails to load, the artifacts appear in the image space as if the attribute were not turned on.

You can define a client-side image map with the help of the map and area elements. The map element is a named container for one or more area elements. Each area element sets a "hot" area on an image and assigns a link destination (and other settings) for a response to the user clicking in that region. The purpose of the usemap attribute is to establish a connection between the img element and a named map element in the same document. In some respects, the map element's name is treated like an anchor in that the "address" of the map element is the element's name preceded by a # symbol.

See hspace.

See height.