netui:imageAnchor Tag

<netui:imageAnchor> Tag

Generates a hyperlink with a clickable image.

Syntax

<netui:imageAnchor
    [accessKey="string_accessKey"]
    [action="string_action"]
    [align="string_align"]
    [alt="string_alt"]
    [border="integer_pixelBorder"]
    [formSubmit="boolean_formSubmit"]
    [forward="string_forward"]
    [height="integer_height"]
    [href="string_href"]
    [hspace="integer_hspace"]
    [id="string_id"]
    [ismap="string_isMap"]
    [linkName="string_linkName"]
    [location="string_location"]
    [lowsrc="string_lowsrc"]
    [onBlur="string_onBlur"]
    [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"]
    [page="string_page"]
    [rolloverImage="string_rolloverImage"]
    [src="string_src"]
    [style="string_Style"]
    [styleClass="string_Class"]
    [tabindex="string_tabIndex"]
    [tagId="string_tagId"]
    [target="string_action"]
    [usemap="string_useMap"]
    [vspace="string_vspace"]
    [width="integer_pixelWidth"] />

Description

Generates a hyperlink with a clickable image. Provides support for image rollovers.

The <netui:imageAnchor> tag must have one of five attributes to correctly create the hyperlink:

JavaScript

If an <netui:imageAnchor> sets the formSubmit attribute to true and no onClick attribute is set, the following JavaScript function will be written into the page. The JavaScript function will be referenced by the onclick attribute of the generated image anchor, and will cause the parent form to submit:

    function submit[formname][formAction]Form() {
      for(var i=0; i<document.forms.length; i++) {
        if (document.forms[i].id == "[formAction]") {
          document.forms[i].method = "POST";
          document.forms[i].action = "[formAction]";
          document.forms[i].submit();
        }
      }
    }
 

It is possible to write a custom onClick JavaScript event handler that would do additional work, for example form validation, and still submit the form correctly. To accomplish this, reference a JavaScript function in the onClick attribute:

    <netui:imageAnchor formSubmit="true" onClick="SubmitFromAnchor();return false;">
        View Results
    </netui:imageAnchor>

And add the referenced JavaScript function to the page:

    function SubmitFromAnchor()
    {
        // implement custom logic here

        for(var i=0; i<document.forms.length; i++)
        {
            // submit to the action /aWebapp/formPost.do
            if (document.forms[i].action == "/aWebapp/formPost.do")
            {
                document.forms[i].method="POST";
                document.forms[i].action="/aWebapp/formPost.do";
                document.forms[i].submit();
            }
        }
    }

This will cause the JavaScript function to be executed before posting the form.

Attributes

accessKeyThe 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
 
RequiredSupports runtime expression evaluationData bindable
NoNoNo

actionThe action method to invoke. The action method must be in the Controller file of the Page Flow directory.
 
RequiredSupports runtime expression evaluationData bindable
NoNoNo

alignThe alignment of the image.
 
RequiredSupports runtime expression evaluationData bindable
NoNoNo

altThe alternative text of the image
 
RequiredSupports runtime expression evaluationData bindable
NoNoRead Only

borderThe border size around the image
 
RequiredSupports runtime expression evaluationData bindable
NoNoNo

formSubmitBoolean. If formSubmit is set to true, and the <netui:anchor> tag is within a <netui:form> tag, then the form data will be submitted to the method named in the <netui:form> tag's action attribute.
 
RequiredSupports runtime expression evaluationData bindable
NoNoNo

forwardThe logical forward name from which to retrieve the hyperlink URI.
 
RequiredSupports runtime expression evaluationData bindable
NoNoNo

heightThe image height
 
RequiredSupports runtime expression evaluationData bindable
NoNoRead Only

hrefThe URL to go to.
 
RequiredSupports runtime expression evaluationData bindable
NoYesNo

hspaceThe horizontal spacing around the image.
 
RequiredSupports runtime expression evaluationData bindable
NoNoRead Only

idThe id attribute is deprecated, use the tagId attribute instead. The id attribute of the rendered HTML tag.
 
RequiredSupports runtime expression evaluationData bindable
NoNoNo

ismapThe server-side map declaration.
 
RequiredSupports runtime expression evaluationData bindable
NoNoNo

linkNameAn internal place on the page to go to.
 
RequiredSupports runtime expression evaluationData bindable
NoNoNo

locationLocation within the URI to visit.
 
RequiredSupports runtime expression evaluationData bindable
NoNoNo

lowsrcThe low resolution image source URI
 
RequiredSupports runtime expression evaluationData bindable
NoNoNo

onBlurThe onBlur JavaScript event.
 
RequiredSupports runtime expression evaluationData bindable
NoYesNo

onClickThe onClick JavaScript event.
 
RequiredSupports runtime expression evaluationData bindable
NoYesNo

onDblClickThe onDblClick JavaScript event.
 
RequiredSupports runtime expression evaluationData bindable
NoYesNo

onFocusThe onFocus JavaScript event.
 
RequiredSupports runtime expression evaluationData bindable
NoYesNo

onKeyDownThe onKeyDown JavaScript event.
 
RequiredSupports runtime expression evaluationData bindable
NoYesNo

onKeyPressThe onKeyPress JavaScript event.
 
RequiredSupports runtime expression evaluationData bindable
NoYesNo

onKeyUpThe onKeyUp JavaScript event.
 
RequiredSupports runtime expression evaluationData bindable
NoYesNo

onMouseDownThe onMouseDown JavaScript event.
 
RequiredSupports runtime expression evaluationData bindable
NoYesNo

onMouseMoveThe onMouseMove JavaScript event.
 
RequiredSupports runtime expression evaluationData bindable
NoYesNo

onMouseOutThe onMouseOut JavaScript event.
 
RequiredSupports runtime expression evaluationData bindable
NoYesNo

onMouseOverThe onMouseOver JavaScript event.
 
RequiredSupports runtime expression evaluationData bindable
NoYesNo

onMouseUpThe onMouseUp JavaScript event.
 
RequiredSupports runtime expression evaluationData bindable
NoYesNo

pageThe page attribute has been deprecated. The module-relative path of the image to be displayed by this rendered tag.
 
RequiredSupports runtime expression evaluationData bindable
NoNoNo

rolloverImageThe URI of the rollover image.
 
RequiredSupports runtime expression evaluationData bindable
NoYesNo

srcThe image source URI
 
RequiredSupports runtime expression evaluationData bindable
NoYesRead Only

styleThe style of the rendered HTML tag.
 
RequiredSupports runtime expression evaluationData bindable
NoNoNo

styleClassThe class of the rendered HTML tag.
 
RequiredSupports runtime expression evaluationData bindable
NoNoNo

tabindexThe 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.
 
RequiredSupports runtime expression evaluationData bindable
NoNoNo

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.

 
RequiredSupports runtime expression evaluationData bindable
NoYesNo

targetThe window target.
 
RequiredSupports runtime expression evaluationData bindable
NoNoNo

usemapThe client-side image map declaration
 
RequiredSupports runtime expression evaluationData bindable
NoNoNo

vspaceThe vertical spacing around the image.
 
RequiredSupports runtime expression evaluationData bindable
NoNoRead Only

widthThe image width.
 
RequiredSupports runtime expression evaluationData bindable
NoNoRead Only

Sample

In this sample, an <netui:imageAnchor> shows "top.jpg" at 25 x 25 pixels and navigates to index.jsp when clicked.
    <netui:imageAnchor href="index.jsp" src="top.jpg" height="25" width="25" />

Code Sample

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

Related Topics

<netui:imageAnchor> Tag Sample