<input type="image" ... does not show up as a form element! why?

[Dave]

Hi all,

I was trying to make an image submit button with a rollover and discovered
to my suprise that there is no way to access a form element of the "image"
type. I tried specifying it by name and also by the elements[] array with
no luck.
Even weirder, I can sandwich an image button in between other input types
and then write a script diplaying the contents of the elements array and it
acts as if the image button does not exist at all!
For example the following:
<input type="text" ... > : this is elements[0]
<input type="checkbox" ...> : this is elements[1]
<input type="image" ...> : this does not exist!
<input type="text" ...> : this is elements[2]

Does anyone know of any way to access (or set) the properties of an image
input type?
I ask, because I wanted to have a rollover action on a button that also can
POST a form WITHOUT using submit() - in order that non-Javascript enabled
browsers can fail gracefully (i.e. the form is still POSTed).


TIA!
MC Dave

 

[Dave]

Solution:
Because the "image button" is not accessible via the elements collection nor
by directly naming it (i.e. forms[0].elements[5] OR myform.BTNcontinue)
BUT you can utilize "this" to change a property directly as in the example
below where a rollover can be specified directly:

<INPUT TYPE="image" name="BTNcontinue"
src="images/buttons/btncontinueshopping.gif"
onmouseover="this.src='images/buttons/btncontinueshopping_f2.gif'"
onmouseout="this.src='images/buttons/btncontinueshopping.gif'">

To reference it from an outside script:
<INPUT TYPE="image" name="BTNcontinue"
src="images/buttons/btncontinueshopping.gif" onmouseover="rollon(this);"
onmouseout="rolloff(this);">

<script language="JavaScript">

function rollon(myref)
{
myref.src='images/buttons/btncontinueshopping_f2.gif';
}

function rolloff(myref)
{
myref.src='images/buttons/btncontinueshopping.gif';
}

</script>