Displaying an Image (<img>)

As in HTML, the <img> element is an empty element that you use to insert images into Web pages. This element is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are its attributes (which apply to XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1, unless otherwise noted):

AttributeDescription
alignSets the alignment of text relative to the image on the screen. Possible settings are left, right, top, texttop, middle, absmiddle, baseline, bottom, and absbottom. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.)
altIs required. This attribute holds the text that should be displayed instead of an image for browsers that cannot handle graphics or have graphics disabled.
borderSpecifies whether the image has a border and, if so, how thick the border is. Set this to 0 for no border, or a positive integer pixel value. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.)
classGives the style class of the element.
heightSpecifies the height of the image, in pixels.
hspaceSets the horizontal spacing (both left and right sides) around the image. Set this to pixel measurements. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.)
idUse the ID to refer to the element; set this attribute to a unique identifier.
ismapSpecifies that this image is to be used as an image map along with a map file.
langSpecifies the base language used in the element. Applies only when the document is interpreted as HTML.
longdescContains a longer description of the image. Allows descriptions that can contain markup. Set this to a URI.
srcIs required. Specifies the URI of the image to display.
styleGives the inline style indicating how to render the element.
titleContains the title of the body (which might be displayed in ToolTips).
usemapSpecifies the URI—usually inside the current document—of a client-side image map.
vspaceSets the vertical spacing around the image. Set this to pixel measurements. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.)
widthIndicates the width of the image. Set this to pixel measurements.
xml:langSpecifies the base language for the element when the document is interpreted as an XML document.

This element supports these XHTML events: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup.

You use the XHTML <img> element to insert images into a Web page as well as image maps. When you use this element, you supply the URI of the image in the src attribute. Besides src, the alt attribute, which specifies alternate text to display in case the image can't be displayed, is required.

Interestingly, the align attribute is not deprecated in the <img> element as it is for virtually every other XHTML element that supports it.

Here's a simple example using the <img> element:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>
            Using the &lt;img&gt; Element
        </title>
    </head>

    <body>
        <center>
            <h1>
                Using the &lt;img&gt; Element
            </h1>
            <img src="image.jpg"
                width="428" height="86" alt="an image" />
        </center>
    </body>
</html>

You can see the result in Figure 17.1.

Figure 17.1. Displaying an image in XHTML.


..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset