# <netui:imageButton> Tag

Renders an `<input type="image">` tag with the specified attributes.

## Syntax

<netui:imageButton
[accessKey="string_accessKey"]
[align="string_align"]
[alt="string_alt"]
[disabled="boolean_disabled"]
[height="integer_height"]
[hspace="integer_hspace"]
[id="string_id"]
[onBlur="string_onBlur"]
[onChange="string_onChange"]
[onClick="string_onClick"]
[onDblClick="string_onDblClick"]
[onFocus="string_onFocus"]
[onKeyDown="string_onKeyDown"]
[onKeyPress="string_onKeyPress"]
[onKeyUp="string_onKeyUp"]
[onMouseDown="string_onMouseDown"]
[onMouseMove="string_onMouseMove"]
[onMouseOut="string_onMouseOut"]
[onMouseOver="string_onMouseOver"]
[onMouseUp="string_onMouseUp"]
[onSelect="string_onSelect"]
[page="string_page"]
[rolloverImage="string_rolloverImage"]
[src="string_src"]
[style="string_Style"]
[styleClass="string_Class"]
[tabindex="string_tabIndex"]
[tagId="string_tagId"]
[value="string_value"]
[vspace="string_vspace"]
[width="integer_pixelWidth"] />

## Description

Renders an `<input type="image">` tag with the specified attributes.

JavaScript

If the <netui:imageButton> specifies a `rolloverImage` attribute, the following JavaScript will be written to the page:

        function swapImage(control, image)
        {
            control.src = image;
        }

## Attributes

accessKey | The keyboard navigation key for the element. The following values are not recommended because they are often used by browsers: `A, C, E, F, G, H, V, left arrow, and right arrow`
Required | Supports runtime expression evaluation | Data bindable
No | No | No
align | The alignment of the image.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
alt | The alternative text of the image
Required | Supports runtime expression evaluation | Data bindable
No | No | Read Only
disabled | Boolean. If set to true, the button will be visible, but diabled.
Required | Supports runtime expression evaluation | Data bindable
No | No | Read Only
height | The image height
Required | Supports runtime expression evaluation | Data bindable
No | No | Read Only
hspace | The horizontal spacing around the image.
Required | Supports runtime expression evaluation | Data bindable
No | No | Read Only
id |
Required | Supports runtime expression evaluation | Data bindable
No | No | No
onBlur | The onBlur JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onChange | The onChange JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onClick | The onClick JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onDblClick | The onDblClick JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onFocus | The onFocus JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onKeyDown | The onKeyDown JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onKeyPress | The onKeyPress JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onKeyUp | The onKeyUp JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseDown | The onMouseDown JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseMove | The onMouseMove JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseOut | The onMouseOut JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseOver | The onMouseOver JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseUp | The onMouseUp JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onSelect | The onSelect JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
page | The page attribute has been deprecated. The module-relative path of the image to be displayed by this rendered tag.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
rolloverImage | The URI of the rollover image.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
src | The image source URI
Required | Supports runtime expression evaluation | Data bindable
No | Yes | Read Only
style | Sets the style of the rendered HTML tag.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
styleClass | The class of the rendered HTML tag.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
tabindex | The tabIndex of the rendered HTML tag. This attribute determines the position of the rendered HTML tag in the sequence of tags that the user may advance through by pressing the TAB key.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
tagId | String value. Sets the `id` (or `name`) attribute of the rendered HTML tag. Note that the real id attribute rendered in the browser may be changed by the application container (for example, Portal containers may change the rendered id value to ensure the uniqueness of id's on the page). In this case, the real id rendered in the browser may be looked up through the JavaScript function getNetuiTagName( tagId, tag ). For example, assume that some tag's `tagId` attribute is set to `foo`.
        <netui:textBox tagId="foo" />
Then the following JavaScript function will return the real id attribute rendered in the browser:
        getNetuiTagName( "foo", this )
To get a <netui:form> element and all of its children elements in JavaScript, use the same JavaScript function `getNetuiTagName( tagId, tag )`. For example, assume that there is a <netui:form> whose tagId attribute is set to `bar`.
        <netui:form tagId="bar" >
Then the following JavaScript function will return the <netui:form> element and its children (packaged as an array).
        document[getNetuiTagName( "bar", this )]
To retreive the value entered into a <netui:textBox> within the <netui:form> tag, use the following JavaScript expression.
        document[getNetuiTagName("bar", this)][getNetuiTagName("foo", this)].value
The second parameter ensures that the JavaScript function begins its search within the correct Portlet scope. Pass the JavaScript keyword `this` as the second parameter. For detailed information on using the function `getNetuiTagName( tagId, tag )` see Using JavaScript in Page Flow and Portal Applications.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
value | This attribute has been deprecated. The value of the image button.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
vspace | The vertical spacing around the image.
Required | Supports runtime expression evaluation | Data bindable
No | No | Read Only
width | The image width.
Required | Supports runtime expression evaluation | Data bindable
No | No | Read Only

## Sample

In this sample, an <netui:imageButton> tag displays the image "house.jpg". On mouseover, the image "house_highlight.jpg" is displayed. When clicked, the <netui:imageButton> will invoke the action specified by its parent <netui:form> tag.

        <netui:form action="formSubmit">
             <netui:imageButton rolloverImage="house_highlight.jpg" src="house.jpg" />
         </netui:form>

## Code Sample

[BEA_HOME]/weblogic81/samples/workshop/SamplesApp/WebApp/tagSamples/netui/imageButton/

## Related Topics

<netui:imageButton> Tag Sample