{"id":237,"date":"2007-09-18T00:00:00","date_gmt":"2007-09-18T00:00:00","guid":{"rendered":"http:\/\/www.strongd.net\/?p=237"},"modified":"2007-09-18T00:00:00","modified_gmt":"2007-09-18T00:00:00","slug":"XHTML MP Images","status":"publish","type":"post","link":"https:\/\/www.strongd.net\/?p=237","title":{"rendered":"XHTML MP Images"},"content":{"rendered":"<p><H2><A name=\"16.1.Displaying an Image in XHTML MP|outline\"><\/A>Displaying an Image in XHTML MP<\/H2><br \/><DIV><br \/><P><FONT class=mainText>The &lt;img&gt; 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 <I>alt<\/I> attribute of the &lt;img&gt; tag if it cannot display the image for reasons such as file not found or image format not supported. The <I>height<\/I> and <I>width<\/I> attributes of the &lt;img&gt; tag, as their names suggested, are used to specify the height and width (in pixels) of an image&#8217;s display area. You can make use of these two attributes to scale up or down the size of an image on the screen.<\/FONT><\/P><br \/><P><FONT class=mainText>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.<\/FONT><\/P><br \/><P><FONT class=mainText>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 &#8220;<A href=\"http:\/\/www.strongd.net\/blog\/show\/228\">Choosing MIME Types Dynamically<\/A>&#8221; section of this XHTML MP tutorial. For example, if &#8220;image\/gif&#8221;, &#8220;image\/jpg&#8221; and &#8220;image\/png&#8221; are found in the accept HTTP header, it means the wireless device supports the GIF, JPG and PNG image formats.<\/FONT><\/P><br \/><P><FONT class=mainText>The following example demonstrates how to display an image in XHTML MP:<BR><\/P><br \/><P><FONT class=codeText color=#0080ff>&lt;?xml version=&#8221;1.0&#8243;?&gt;<BR>&lt;!DOCTYPE html PUBLIC &#8220;-\/\/WAPFORUM\/\/DTD XHTML Mobile 1.0\/\/EN&#8221; &#8220;http:\/\/www.wapforum.org\/DTD\/xhtml-mobile10.dtd&#8221;&gt;<BR><BR>&lt;html xmlns=&#8221;http:\/\/www.w3.org\/1999\/xhtml&#8221;&gt;<BR>&nbsp;&nbsp;&lt;head&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Image in XHTML MP&lt;\/title&gt;<BR>&nbsp;&nbsp;&lt;\/head&gt;<BR><BR>&nbsp;&nbsp;&lt;body&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&#8221;smile.gif&#8221; alt=&#8221;Smile&#8221; height=&#8221;62&#8243; width=&#8221;60&#8243; \/&gt;&lt;br\/&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hello, welcome to our XHTML MP tutorial.<BR>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/p&gt;<BR>&nbsp;&nbsp;&lt;\/body&gt;<BR>&lt;\/html&gt;<\/FONT><\/P><br \/><P><BR><\/P><br \/><P><FONT class=mainText>The result of the above XHTML MP code in some WAP browsers is shown below:<\/FONT><\/P><br \/><P><br \/><TABLE cellSpacing=0 cellPadding=4 width=\"100%\" border=0><br \/><COLGROUP><br \/><COL width=128><br \/><COL width=128><br \/><THEAD><br \/><TR vAlign=top><br \/><TD width=\"50%\"><br \/><P><IMG height=162 src=\"http:\/\/www.developershome.com\/wap\/xhtmlmp\/xhtml_mp_tutorial_html_m5ee28f1a.png\" width=130 align=left border=0 name=image34><BR clear=left><FONT class=mainText>Sony Ericsson T610<\/FONT><\/P><\/TD><br \/><TD width=\"50%\"><br \/><P><IMG height=166 src=\"http:\/\/www.developershome.com\/wap\/xhtmlmp\/xhtml_mp_tutorial_html_74435b4.png\" width=134 align=left border=0 name=image35><BR clear=left><FONT class=mainText>Nokia Mobile Browser 4.0<\/FONT><\/P><\/TD><\/TR><\/THEAD><br \/><TBODY><\/TBODY><\/TABLE><\/P><br \/><P><BR><\/P><br \/><P><FONT class=mainText>If the image file does not exist, the result of the same XHTML MP code will become:<\/FONT><\/P><br \/><P><br \/><TABLE cellSpacing=0 cellPadding=4 width=\"100%\" border=0><br \/><COLGROUP><br \/><COL width=128><br \/><COL width=128><br \/><THEAD><br \/><TR vAlign=top><br \/><TD width=\"50%\"><br \/><P><IMG height=162 src=\"http:\/\/www.developershome.com\/wap\/xhtmlmp\/xhtml_mp_tutorial_html_m268bd1f2.png\" width=130 align=left border=0 name=image36><BR clear=left><FONT class=mainText>Sony Ericsson T610<\/FONT><\/P><\/TD><br \/><TD width=\"50%\"><br \/><P><IMG height=166 src=\"http:\/\/www.developershome.com\/wap\/xhtmlmp\/xhtml_mp_tutorial_html_426180d1.png\" width=134 align=left border=0 name=image37><BR clear=left><FONT class=mainText>Nokia Mobile Browser 4.0<\/FONT><\/P><\/TD><\/TR><\/THEAD><br \/><TBODY><\/TBODY><\/TABLE><\/P><br \/><P><BR><\/P><\/FONT><\/DIV><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Displaying an Image in XHTML MPThe &lt;img&gt; 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 &lt;img&gt; tag if it cannot display the image for reasons such as file not found or image format &hellip; <a href=\"https:\/\/www.strongd.net\/?p=237\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">XHTML MP Images<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-237","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/posts\/237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=237"}],"version-history":[{"count":0,"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/posts\/237\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}