diff options
Diffstat (limited to 'files/th/archive/mozilla/xul/ภาพ,อิมเมจ/index.html')
-rw-r--r-- | files/th/archive/mozilla/xul/ภาพ,อิมเมจ/index.html | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/files/th/archive/mozilla/xul/ภาพ,อิมเมจ/index.html b/files/th/archive/mozilla/xul/ภาพ,อิมเมจ/index.html new file mode 100644 index 0000000000..e8d9a97827 --- /dev/null +++ b/files/th/archive/mozilla/xul/ภาพ,อิมเมจ/index.html @@ -0,0 +1,151 @@ +--- +title: รูปภาพ +slug: 'Archive/Mozilla/XUL/ภาพ,อิมเมจ' +translation_of: Archive/Mozilla/XUL/image +--- +<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/th/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">Examples</a> | + <a href="#Attributes">Attributes</a> | + <a href="#Properties">Properties</a> | + <a href="#Methods">Methods</a> | + <a href="#Related">Related</a> ] +</span></div> + +<h3 id="ภาพรวม">ภาพรวม</h3> + +<p>An element that displays an image, much like the HTML <a href="/En/HTML/Element/Img" title="https://developer.mozilla.org/en/HTML/element/img"><code>img</code></a> element. The <code id="a-src"><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> attribute can be used to specify the URL of the image.</p> + +<p>ข้อมูลเพิ่มเติมได้ที่ <a href="/en/XUL_Tutorial/Adding_Labels_and_Images" title="en/XUL_Tutorial/Adding_Labels_and_Images">XUL tutorial</a>.</p> + +<div class="noinclude"> +<div class="note"> +<p><strong>บันทึก:</strong> Prior to <span title="(Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5)">Gecko 8.0</span>, images did not shrink down with the same ratio in both directions when specifying maximum sizes using <code>maxheight</code> or <code>maxwidth</code>. The new behavior aligns more with the HTML <a href="/th/docs/Web/HTML/Element/img" title="The documentation about this has not yet been written; please consider contributing!"><code><img></code></a> element and shrinks both the width and height down proportionally.</p> +</div> +</div> + +<dl> + <dt>Attributes</dt> + <dd><a href="#a-onerror">onerror</a>, <a href="#a-image.onload">onload</a>, <a href="#a-src">src</a>, <a href="#a-validate">validate</a></dd> +</dl> + +<dl> + <dt>Properties</dt> + <dd><a href="#p-accessibleType">accessibleType</a>, <a href="#p-src">src</a></dd> +</dl> + +<dl> + <dt>Style classes</dt> + <dd><a href="#s-alert-icon">alert-icon</a>, <a href="#s-error-icon">error-icon</a>, <a href="#s-message-icon">message-icon</a>, <a href="#s-question-icon">question-icon</a></dd> +</dl> + +<h3 id="ตัวอย่าง">ตัวอย่าง</h3> + +<div class="float-right"><img alt="Image:Firefoxlogo2.png" class="internal" src="/@api/deki/files/220/=Firefoxlogo2.png"></div> + +<pre class="eval"><image src='Firefoxlogo.png' width='135' height='130'/> +</pre> + +<h3 id="Attributes">Attributes</h3> + +<p> </p><div id="a-onerror"> + + +<dl> + <dt><code id="a-onerror"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/onerror">onerror</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>This event is sent to an <code><a href="/en-US/docs/Mozilla/Tech/XUL/image" title="image">image</a></code> element when an error occurs loading the image.</dd> +</dl> +</div> <div id="a-image.onload"> + + +<dl> + <dt><code id="a-image.onload"><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Attribute/image.onload">image.onload</a></code></dt> + <dd>ประเภท: <em>script code</em></dd> + <dd>This event handler will be called on the <code><a href="/th/docs/Mozilla/Tech/XUL/image" title="image">image</a></code> element when the image has finished loading. This applies whether the image is applied via the <code id="a-src"><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> attribute or the <code>list-style-image</code> style property. If you change the image, the event will fire again when the new image loads. This event will not bubble up the element tree.</dd> +</dl> +</div> <div id="a-src"> + +<dl> + <dt> + <code id="a-src"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></dt> + <dd> + Type: <em>URI</em></dd> + <dd> + The URI of the content to appear in the element.</dd> +</dl> + + +</div> <div id="a-validate"> + + +<dl> + <dt><code id="a-validate"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/validate">validate</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>This attribute indicates whether to load the image from the cache or not. This would be useful if the images are stored remotely or you plan on swapping the image frequently. The following values are accepted, or leave out the attribute entirely for default handling:</dd> + <dd> + <dl> + <dt><code>always</code></dt> + <dd>The image is always checked to see whether it should be reloaded.</dd> + <dt><code>never</code></dt> + <dd>The image will be loaded from the cache if possible.</dd> + </dl> + </dd> +</dl> +</div> + +<h3 id="Properties">Properties</h3> + +<div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: <em>integer</em></dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> +</div> <div id="p-src"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/src">src</a></span></code></dt> + <dd>Type: <em>URL</em></dd> + <dd>Gets and sets the value of the <code id="a-src"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> attribute.</dd> +</dl></div> <table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited Properties</strong><br> <small> <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/th/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody> +</table> + +<h3 id="Methods">Methods</h3> + +<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited Methods</strong><br> <small><code><a href="https://developer.mozilla.org/th/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.appendChild">appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.cloneNode">cloneNode()</a></code>, <a class="internal" href="/En/DOM/Node.compareDocumentPosition" title="En/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getClientRects">getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getElementsByClassName">getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <a class="internal" href="/En/DOM/Node.getFeature" title="En/DOM/Node.getFeature">getFeature</a>, <a class="internal" href="/En/DOM/Node.getUserData" title="En/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.isDefaultNamespace">isDefaultNamespace()</a></code>, <a class="internal" href="/En/DOM/Node.isEqualNode" title="En/DOM/Node.isEqualNode">isEqualNode</a>, <a class="internal" href="/En/DOM/Node.isSameNode" title="En/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.isSupported">isSupported()</a></code>, <a class="internal" href="/En/DOM/Node.lookupNamespaceURI" title="En/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a class="internal" href="/En/DOM/Node.lookupPrefix" title="En/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.querySelector">querySelector()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.querySelectorAll">querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/th/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a class="internal" href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData">setUserData</a></small></p> </td> </tr> </tbody> +</table> + +<h3 id="Style_classes">Style classes</h3> + +<dl> + <dt> + <code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/alert-icon">alert-icon</a></code></dt> + <dd> + Class that adds an alert icon. This typically looks like an exclamation mark. This and the other icon classes may be used by <code><a href="/en-US/docs/Mozilla/Tech/XUL/image" title="image">image</a></code> elements or other elements which can have an image.</dd> +</dl> <dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/error-icon">error-icon</a></code></dt> + <dd>Class that adds an error icon. This will typically be a red "X" icon.</dd> +</dl> <dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/message-icon">message-icon</a></code></dt> + <dd>Class that adds a message box icon.</dd> +</dl> <dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/question-icon">question-icon</a></code></dt> + <dd>Class that adds a question icon, which usually looks like a question mark.</dd> +</dl> + +<h3 id="เนื้อหาที่เกี่ยวข้อง">เนื้อหาที่เกี่ยวข้อง</h3> + +<p>See also the <code id="a-image"><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> and <code id="a-icon"><a href="https://developer.mozilla.org/th/docs/Mozilla/Tech/XUL/Attribute/icon">icon</a></code> attributes.</p> + +<h3 id="Interfaces">Interfaces</h3> + +<ul> + <li><code><a href="/th/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleProvider" title="">nsIAccessibleProvider</a></code></li> + <li><code><a href="/th/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMXULImageElement" title="">nsIDOMXULImageElement</a></code></li> +</ul> + +<div class="noinclude"> </div> |