img Displaying an Image

<img> Displaying an Image

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:

  • align Sets 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.)

  • alt Required. This attribute holds the text that should be displayed instead of an image for browsers that cannot handle graphics or have graphics disabled. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • border Specifies whether the image has a border and, if so, how thick the border is. Set this to for no border or to a positive integer pixel value. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.)

  • class Gives the style class of the element. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • height Specifies the height of the image, in pixels. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • hspace Sets the horizontal spacing (both left and right sides) around the image. Set this to pixel measurements. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.)

  • id Refers to the element; set this attribute to a unique identifier. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • ismap Specifies that this image is to be used as an image map along with a map file. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • lang Specifies the base language used in the element. Applies only when the document is interpreted as HTML. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • longdesc Contains a longer description of the image. Allows descriptions that can contain markup. Set this to a URI. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • src Required. Specifies the URI of the image to display. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • style Inline style indicating how to render the element. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • title Contains the title of the body (which might be displayed in ToolTips). (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • usemap Specifies the URIusually inside the current documentof a client-side image map. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • vspace Sets the vertical spacing around the image. Set this to pixel measurements. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.)

  • width Indicates the width of the image. Set this to pixel measurements. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • xml:lang Specifies the base language for the element when the document is interpreted as an XML document. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

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

Deprecated Attribute

In XHTML 2.0, the <img> element is deprecated in favor of the <object> element.

You use the XHTML <img> element to insert images into a Web page and 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 to display an image, ch17_02.jpg:

Listing ch17_01.html
 <?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="ch17_02.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.

graphics/17fig01.gif



Real World XML
Real World XML (2nd Edition)
ISBN: 0735712867
EAN: 2147483647
Year: 2005
Pages: 440
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net