The IMG element displays a graphical image in whatever MIME types the browser is equipped to handle. Common image MIME types are GIF and JPEG. 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.0 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 Internet Explorer, too, 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).

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.0 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 everyone can, or chooses to, download 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. To replace the image in such a browser, the text assigned to the ALT attribute is displayed where the IMG element appears on the page. The ALT attribute should contain a brief description of what the image is. The HTML recommendation calls the ALT attribute a requirement for the IMG element, but in practice, graphical browsers can get by without it. Still, some browsers display the ALT text initially as the image downloads from the server, providing a temporary alternate display. Be aware that the size of the image area on the page may limit the amount of text you can use for ALT. Make sure the description is readable.

Navigator provides a dedicated attribute to specifying 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 size to zero.

Used with IE 4 data binding to associate a remote data source column name with the SRC attribute URL of an IMG element. The data source column must contain an absolute or relative URL. A DATASRC attribute must also be set for the IMG element.

Used with IE 4 data binding to specify the name of the remote ODBC data source (such as an Oracle or SQL Server database) to be associated with the element. Content from the data source is specified via the DATAFLD attribute.

Internet Explorer 4 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.

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 height and width of the source image. If you supply a different measure, the browser scales the image 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. Use the margin or padding attributes to duplicate the same functionality with style sheets because these attributes are deprecated in HTML 4.0.

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.

If you assign an ID attribute and not a NAME attribute, the value of the ID attribute cannot be used reliably as the IMG element's name in script reference forms that use the element name. Some browser platforms insist on the NAME attribute being used in an image name reference.

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?50,25" to the server. A server CGI program named nav 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.

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.

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.

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), it is usually more convenient to create a reference to the IMG element by using a unique name you assign to the item. Thus, if you edit the page and move or delete multiple IMG elements on the page, you do not have to worry about adjusting index values to array-style references (document.images[i]).

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

Whenever you set the DYNSRC attribute of an IMG to display a video clip, 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 JavaScript syntax for assigning style attributes. But if you are designing the page for cross-browser deployment, use only the CSS syntax, which both Navigator and Internet Explorer support.

For use in Version 4 browsers, style sheets are recommended over dedicated attributes where applicable, but due to the implementation in Navigator 4, you need to wrap IMG elements with DIV or SPAN elements that contain border and margin-related style sheet rules to make them work with IMG elements. The following example with the embedded STYLE attribute works only in Internet Explorer.

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