16. XHTML MP Images

16.1. Displaying an Image in XHTML MP

The <img> tag is used to display an image in XHTML MP. This is the same as in HTML. WAP browsers will display the text assigned to the alt attribute of the <img> tag if it cannot display the image for reasons such as file not found or image format not supported. The height and width attributes of the <img> tag, as their names suggested, are used to specify the height and width (in pixels) of an image's display area. You can make use of these two attributes to scale up or down the size of an image on the screen.

Besides the old WBMP image format, WAP 2.0 wireless devices should be able to support image formats commonly used on the web such as GIF, animated GIF, JPG, and PNG. However, this is device-specific. Some WAP 2.0 wireless devices can only support a subset of the above image formats.

One simple way to find out whether a particular image format is supported on a wireless device is to check the accept HTTP header, like what we have done in the "Choosing MIME Types Dynamically" section of this XHTML MP tutorial. For example, if "image/gif", "image/jpg" and "image/png" are found in the accept HTTP header, it means the wireless device supports the GIF, JPG and PNG image formats.

The following example demonstrates how to display an image in XHTML MP:


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <title>Image in XHTML MP</title>

      <img src="smile.gif" alt="Smile" height="62" width="60" /><br/>
      Hello, welcome to our XHTML MP tutorial.

The result of the above XHTML MP code in some WAP browsers is shown below:

Sony Ericsson T610

Nokia Mobile Browser 4.0

If the image file does not exist, the result of the same XHTML MP code will become:

Sony Ericsson T610

Nokia Mobile Browser 4.0

Previous Page Page 20 of 36 Next Page

Feedback Form (ExpandCollapse)

What do you think about this web page?

(Optional) Please provide us more details. For example, suppose you select option 2 above, can you tell us specifically what information is missing? You can also suggest anything that can help us improve this web page.

(Optional) Your name:

(Optional) Your email address:

Please enter again to confirm:

Due to the amount of messages we received, we may not be able to reply to all messages.

A button for going back to the top of this page