Forum Moderators: open

Message Too Old, No Replies

posting forms - using a custom image for submit

         

scorpion

4:25 pm on Mar 26, 2003 (gmt 0)

10+ Year Member



is there a way to post form data using the <form post> construct but so that the button image for the submit is a custom .jpg graphic instead of a standard form button?

jatar_k

4:28 pm on Mar 26, 2003 (gmt 0)

WebmasterWorld Administrator 10+ Year Member



yes

<input type="image" border="0" name="submitbutton" src="/images/submit.gif" width="62" height="20" onClick="javascript:document.form[0].submit();">

think that's right

Birdman

4:32 pm on Mar 26, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



jatar_k, you don't really need the js onClick event, do you?

<input type="image" border="0" name="submitbutton" src="/images/submit.gif" width="62" height="20" />

jatar_k

4:35 pm on Mar 26, 2003 (gmt 0)

WebmasterWorld Administrator 10+ Year Member



not sure, if you click it how will it submit otherwise? My js isn't the greatest, I can use it and do some fancy things but I am no expert. ;)

Birdman

4:49 pm on Mar 26, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Just verified it. I have it done like this on a few sites:

<input type="image" src="src.gif" />

I suppose the type "image" is treated the same as the type "submit".

Added: My js isn't the greatest, either. ;)

scorpion

5:01 pm on Mar 26, 2003 (gmt 0)

10+ Year Member



oh, forgot to mention if it makes any diff, the image i want for the submit button has a rollover effect...

BlobFisk

6:27 pm on Mar 26, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Birdmans input type="image" works fine as a submit button - although it sparks the interesting question of whether the same can be used to create a Reset button as well!

To achieve a rollover effect using this code, the following code should work on all DOM1 compliant browsers (I've tested it on IE6, Moz1 and Opera 6):


<input type="image" src="out.gif" alt="" width="100" height="30" onmouseover="this.src='over.gif ' " onmouseout=" this.src='out.gif ' ">

Alternatively, you can use a regular swap image script on an image and use jatar_k's document.formName.submit() code.

HTH

Jocelyn

8:56 pm on Mar 26, 2003 (gmt 0)

10+ Year Member



I had a look to the official HTML documentation :
[w3.org...]

Birdman, you were right, it acts as a submit button.

Jocelyn