Webpage Workshop: Home » XHTML 1.0 language reference » Image

Image

This element is used to insert an image object into an XHTML page. This is generally in the form of a JPEG, GIF or PNG image file.

<img
    align="bottom | left | middle | top | right"**
    alt="alternative text"
    border="pixels"**
    class="class name(s)"
    dir="ltr | rtl"
    height="pixels"
    hspace="pixels"**
    id="unique identifier"
    ismap
    lang="language code"
    longdesc="url"
    src="url"
    style="style information"
    title="text"
    usemap="url"
    vspace="pixels"**
    width="pixels"
/>

Key:
‡ = Required attribute
** = Transitional only

Explanation of attributes

align**: used to specify the horizontal alignment of the element with respect to the page. The default value is "left".

alt‡: used to specify the alternative text that should replace the image if the image cannot be displayed. This text should not be a description of the image but rather a replacement text that would be suitable in the context in which the image would have been displayed, eg. an image of a heart in the code "I <img src="heart.gif" alt="love" /> you" would have "love" as its alternative text as the word "heart" would make much less sense in context with the text.

border**: used to specify the thickness of the border that surrounds the image. This should be a value in pixels. The default for images that are not being used as links is '0', whereas when an image is used as a link a border is generally shown - the value being set by the browser.

class: used to state which class(es) the element belongs to. It is possible to indicate more than one class for an element by separating each class name with a space character. This attribute is normally used in combination with a stylesheet in order to associate the elements with particular styles defined within the stylesheet.

dir: used to set the direction of the text in combination with the language set in the lang attribute. The available values are "ltr" (left to right) and "rtl" (right to left), with the default value being "ltr".

height: this attribute indicates the height, in pixels, that the image should be displayed at. Percentage values are also supported by most browsers, but this method of specifying height is unpredictable at best.

hspace**: used to specify the horizontal space between the image and its neighboring text.

id: used to specify a unique alphanumeric identifier to the element. This is usually used in combination with stylesheets in order to apply a style to one particular instance of an element. Only one element, regardless of type, can be given a particular id.

ismap: used to indicate that the image is a server-side image map. This means that the coordinates of the image that the user clicks on are sent to the server for processing. In this case, the image must be contained within an anchor element, where the URL that the anchor points to is the server-side image map processor.

lang: used to indicate the language being used in the text contained within the element. The value of this attribute takes on the form of the ISO standard lanuage abbreviations found in RFC 3066. A list of these codes can be found on the ISO language codes page.

longdesc: this is used to indicate the URL of a document that further explains the content of the image.

src‡: this attribute specifies the URL of the source image that should be displayed when using an image element.

style: used to specify an inline style to apply to the element. The styles defined here override the styles declared in the header section.

title: used to define an advisory text that may be displayed as a tooltip when a mouse is used to hover over the element.

usemap: this indicates that the image is used as a client-side image map. The value of this attribute should match the value of the name attribute in the corresponding map element.

vspace**: used to specify the vertical space between the image and its neighboring text.

width: this attribute indicates the width, in pixels, that the image should be displayed at. Percentage values are also supported by most browsers, but this method of specifying width is unpredictable at best.

Event handlers

The following event handlers are defined for this element:

Basic example

<img src="/images/png256_example.jpg"
    alt="An example of how the img element works"
    width="320"
    height="240"
/>

The above code will display something like:

An example of how the img element works

Compatibility

Description: Support of image and attributes in various browsers
Test Internet Explorer 6+ Netscape 4 Mozilla and Netscape 6+ Opera 6+ MSN TV (WebTV) Konqeuror 3.0+
Basic element support  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: align  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: alt  Yes  Yes  Yes  Yes  No  Yes 
Attribute: border  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: class  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: dir  Yes  No  No 
Attribute: height  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: hspace  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: ismap  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: id  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: lang  Yes  No 
Attribute: longdesc  No  No  Yes  No  No  No 
Attribute: src  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: style  Yes  Yes  Yes  Yes  Yes 
Attribute: title  Yes  No  Yes  Yes  No  Yes 
Attribute: usemap  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: vspace  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: width  Yes  Yes  Yes  Yes  Yes  Yes 

Key:
The browser icons are explained in the below list:
Internet Explorer 6+ = Microsoft Internet Explorer 6+
Netscape 4 = Netscape Communicator 4
Mozilla and Netscape 6+ = Mozilla and Netscape Navigator 6+
Opera 7+ = Opera 7+
MSN TV (WebTV) = MSN TV (aka. WebTV)
Konqeuror 3.0+ = Konqueror 3.0+