<IMG></IMG> - Inline ImagesThe <IMG> tag inserts an image into the HTML document. The src and alt attributes are required.
It is illegal to close this tag. </IMG> should not appear in an HTML document.
<IMG>| %coreattrs %i18n %events |
| R |
src=
|
[CS] |
|---|---|---|
|
Gives the image's location. | |
| This attribute tells the browser where to get the image from. It is a required attribute. | ||
| R |
alt=
|
[CS] |
|---|---|---|
|
Gives description. | |
|
This attribute provides a short description of the image for non-graphical browsers and browsers with automatic image loading turned off. It replaces the image with the alternate text. It is a required attribute: if the image is for decoration and has no meaning, specify "" (empty string). If you don't put this attribute, "image" will appear. |
||
longdesc=
|
[CS] | |
|---|---|---|
|
Gives location of description. | |
This attribute specifies the location of a long description of the image or image map. This attribute may supplement, but not replace, the alternate description provided by alt.
|
||
height=
|
[CN] | |
|---|---|---|
|
Gives height in pixels. | |
|
Gives height by percent of available space. | |
|
This attribute can override the inherent height of the image and either stretch or shrink it to fit the specified width. This attribute can be also used to give the actual width of the image in pixels. When combined with the width attribute, it allows the browser to load the text before the images. I highly recommend you use this attribute. |
||
width=
|
[CN] | |
|---|---|---|
|
Gives width in pixels. | |
|
Gives width by percent of available space. | |
|
This attribute can override the inherent width of the image and either stretch or shrink it to fit the specified width. This attribute can be also used to give the actual width of the image in pixels. When combined with the height attribute, it allows the browser to load the text before the images. I highly recommend you use this attribute. If you don't know the height and width of your image, Netscape can tell you: open up the image in the browser; [width] × [height] will be shown in the title bar. PLEASE use these attributes. Viewing graphical web pages without width and height attributes is very annoying.
|
||
| D |
border=
|
[CN] |
|---|---|---|
|
Gives border thickness in pixels. | |
| This attribute controls the thickness of the border around the image. The default value is "0", meaning no border. However, it is customary for browsers to automatically put a border around image links. | ||
| D |
align=
|
[CI] |
|---|---|---|
|
Aligns bottom of image with baseline. | |
|
Aligns vertical center of image with vertical center of line. | |
|
Aligns top of image with top of text line. | |
| The attribute controls the vertical alignment of the image in relation to the text line. The default value is "bottom". | ||
| D |
align=
|
[CI] |
|---|---|---|
|
Aligns image with left margin. | |
|
Aligns image with right margin. | |
This align attribute controls horizontal alignment (floats). By aligning the image with the left or right margin, it allows the text to wrap between the image and the opposite margin. The <BR> tag is used with the clear attribute to stop text wrap.
|
||
| D |
hspace=
|
[CN] |
|---|---|---|
|
Specifies padding in pixels. | |
| This attribute adds padding to the right and left of the image. A value of "10", for example, would add 10 pixels to the left, and 10 pixels to the right. | ||
| D |
vspace=
|
[CI] |
|---|---|---|
|
Specifies padding in pixels. | |
| This attribute adds padding to the top and bottom of the image. A value of "10", for example, would add 10 pixels to the top and 10 pixels to the bottom. | ||
usemap=
|
[CI] | |
|---|---|---|
|
Identifies the image map coordinates using the URI of a <MAP> element; a fragment identifier is used to indicate the appropriate <MAP> element.
|
|
| This attribute applies a client-side image map to the image. | ||
ismap (ismap=ismap)
|
[CI] | |
|---|---|---|
| This boolean attribute indicates the use of a server-side image map. The image must appear within a hyperlink to the processing script for this to work. | ||
Examples of inline images:
Here is an inline image:
Here is an inline image with align="bottom":
Here is an inline image with align="middle":
Here is an inline image with align="top":
Image with horizontal spacing:
[]
has hspace=30.
Image with vertical spacing:
[]
has vspace=30.
Here is an inline image stretched twice as long:
This image serves as a link:
This image has a 5-pixel border, but it's not a link:
The image is courtesy of Larke Sora. Since she's a graphics person and I'm not, I asked her for an example image. ^^
Here is the code for the sample above:
<p>Here is an inline image:
<IMG src="image.gif" alt="Image" width=50 height=40></p>
<p>Here is an inline image with <KBD>align="bottom"</KBD>:
<IMG src="image.gif" alt="Image" align="bottom" width=50 height=40></p>
<p>Here is an inline image with <KBD>align="middle"</KBD>:
<IMG src="image.gif" alt="Image" align="middle" width=50 height=40></p>
<p>Here is an inline image with <KBD>align="top"</KBD>:
<IMG src="image.gif" alt="Image" align="middle" width=50 height=40></p>
<p>Image with horizontal spacing:
[<IMG src="image.gif" alt="Image" width=50 height=40 hspace=30>]
has <KBD>hspace=30</KBD>.</p>
<p>Image with vertical spacing:
[<IMG src="image.gif" alt="Image" width=50 height=40 vspace=30>]
has <KBD>vspace=30</KBD>.</p>
<p>Here is an inline image stretched twice as long:
<IMG src="image.gif" alt="Image" width=100 height=40></p>
<p>This image serves as a link:
<A href="index.html"><IMG src="image.gif" alt="Image" width=50 height=40></A></p>
<p>This image has a 5-pixel border, but it's not a link:
<IMG src="image.gif" alt="Image" width=50 height=40 border=5></A></p>
See <BR> for examples with left/right aligned images.
Client-side image maps are recommended for most purposes. Unlike server-side image maps, they are easier to work with, involve no scripting, and don't need a separate set of links for non-graphical browsers.
Sample (try clicking on it):
Sample code:
<A href="https://fantasai.tripod.com/cgi-bin/imgmap.pl"><IMG ismap src="../../links-banners/f-banner.jpg" alt="Image Map" width=200 height=40></A>
Using regular inline images can often do the job just fine--the toolbar at the top of this page is six separate images. If you break up your image and make each one a link, you can often get the effect of an image map without the hassle. Just don't put any spaces between tags.
