<IMG> Command

Command Syntax: <IMG src="URL" command parameters> Places the in-line image available at the specified URL in the HTML document at or near the point of insertion of the command depending on the command parameters provided.

Command Parameters: align="alignment" Where permissible alignments are: left - forces the inline image to the left margin and wraps text around it to the right. right - forces the inline image to the right margin and wraps text around it to the left. baseline - aligns the bottom of the inline image to the baseline of surrounding text. texttop - aligns the top of the inline image to the top of tallest letters in the surrounding text line. top - aligns the inline image to the top of capital letters in text surrounding the image. middle - aligns the vertical center of the inline image to the baseline of surrounding text. bottom - aligns the bottom of the inline image to the baseline of surrounding text. abstop - aligns the inline image to the absolute top of the ascenders of surrounding text. absmiddle - aligns the inline image to the absolute middle of surrounding text taking into account the ascenders and descenders. absbottom - aligns the inline image to the absolute bottom of the descenders surrounding text. alt="some alternate display text" Displays the alternate text specified while an inline image is loading if the image is not available if the user has turned off display of inline images Some WWW search engines index alternate text to make inline images searchable. All significant inline image placements should include alternate text references. border="pixels" The default value is zero unless the inline image is the object of a hypertext reference link (see below). Produces a border with the specified width in pixels around the inline image. When used as the object of a hypertext reference link an inline image automatically has a blue border one pixel wide around it by default in order to indicate that the image is clickable.  Establishing a border pixel value of 0 eliminates this blue border. height|width="pixels" Provides the browser with the exact height and/or width in pixels of the inline image.  This has the advantage that it does not require the browser to load in image before its dimensions can be established for display.  Instead, the browser displays a temporary frame of the appropriate size into which the inline image loads.  This produces a pleasing effect and permits the HTML document to load much more quickly, especially if inline images are placed inside tables. All inline image placements should include accurate height and width references. It is possible to shrink or blow up an inline image by providing the browser with dimensions larger or smaller, respectively, than its actual dimensions.  In these cases the browser attempts to dither the image into the proscribed space.  This can produce some undesirable visual effects. hspace|vspace="pixels" Provides the browser with pixel values for the horizontal standoff (hspace) and/or vertical standoff (vspace) for the inline image. The standoff governs the amount of white space that will appear around an inline image which has text wrapped around it. The command parameter applies only to inline images aligned to the right or to the left since only these two alignments cause the browser to wrap text around a placed inline image. Both command parameters cause the standoff on both sides of the image.  See the example at the left. src|lowsrc="URL" The src command parameter indicates to the browser the location (URL) of the primary inline image to load and display on the page. The lowsrc command parameter indicates to the browser the location (URL) of a secondary or low source image to load and display on the page while the primary inline image is loading. The lowsrc image should be identical to the primary image in content but at a much lower color depth or in grayscale and, therefore, with many fewer bytes of information stored. The effect produced is that the secondary image, which is smaller in terms of bytes, loads rapidly and is replaced by the larger primary image as it loads.  This can be surprising and pleasing. The effect is lost when the browser has cached both images. ismap="URL" The ismap command parameter provides the browser with the location (URL) of a host-side image map .MAP file associated with the inline image which defines areas of the image as clickable hypertext reference links. usemap="#map name" The usemap command parameter provides the browser with the name of a client-side image map which has been previously defined within the HTML document and is associated with the inline image. The client-side image map, defined using the <MAP> command, establishes areas of the image as clickable hypertext reference links. Of course, the whole image can be made to act as a hypertext reference link by simply making it the object of a hypertext reference anchor - <A>.

Examples: <IMG src="nslogo.gif" lowsrc="nslogo_lo.gif" width="200" height="64" alt="NetStrider Logo" border="0"> places primary inline image nslogo.gif loads secondary low source image nslogo_lo.gif first defines the height and width of both the low source and primary image declares no border around the placed image displays alternate text "NetStrider Logo" if the image is not viewable <IMG src="w_map.jpg" width="350" height="240" alt="Clickable World Map" usemap="#w_map"> places primary inline image w_map.jpg defines the height and width of the image displays alternate text "Clickable World Map" if the image is not viewable associates a predefined client-side image map called w_map with the image so that areas defined in the image map will act as hypertext reference links <IMG src="contents.jpg" width="350" height="240" alt="Table of Contents" ismap="contents.map"> places primary inline image contents.jpg defines the height and width of the image displays alternate text "Table of Contents" if the image is not viewable associates a server-side image map file called contents.map with the image so that areas defined in the image map will act as hypertext reference links <IMG src="grizzly.jpg" width="75" height="120" alt="grizzly bear" hspace="25" align="left"> places primary inline image grizzly.jpg defines the height and width of the image displays alternate text "grizzly bear" if the image is not viewable establishes a horizontal standoff of 25 pixels around the image aligns the image to the left such that any text placed immediately after the image will flow around it to the right Effects of Various Image/Text Alignments: alignment top alignment abstop alignment middle alignment absmiddle alignment bottom alignment absbottom alignment texttop alignment baseline

Return to Section I:L