[ivory_kitten]

I want to use a rollover image as the submit button but can't get the php to recognise it as submit button. My script works fine with a regular submit button, but it's really ugly looking

I've searched everywhere and cannot find a solution to do this, does anyone have any ideas?

Thanks in advance

[Keith]

There are a number of ways this could be accomplished.




If you want to use Javascript on a regular submit input:

Code:

<form action="form.php" method="post">

<input
	type="image"
	name="submit"
	src="button1.gif"
	onmouseover="this.src='button2.gif'"
	onmouseout="this.src='button1.gif'"
/>

</form>

And form.php would look similar to:

PHP Code:

<?php



if ( $_POST )

{

    /* ...do form processing here... */

}



// or, if you'd like to target multiple submit names, just append _x or _y to the end of the submit name... ie:



if ( isset( $_POST['submit_x'] ) )

{

    /* ...do form processing here... */

}



?>

Or use an image with a Javascript onclick event, same as the example above, only with an <img> tag:

Code:

<form action="form.php" method="post">

</form>
<img
	src="button1.gif"
	onmouseover="this.src='button2.gif'"
	onmouseout="this.src='button1.gif"
	onclick="document.forms[0].submit()"
/>

Or you can use styled links with href="javascript:document.forms['myForm'].submit"... all sorts of crap.

[ivory_kitten]

thanks heaps i will try them out and see which works the best for me

[Keith]

Cool... one small note... I just noticed I left out the parenthesis for the final example. It should be:

href="javascript:document.forms['myForm'].submit()"

[ivory_kitten]

i'm not sure what i've done wrong, but the javascript thing is not working!

i used dreamweaver to insert the rollover image and here's the code that i've used (quickQuote) is the name of my form:

<a href="javascript:document.forms['quickQuote'].submit()" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('submit','','Buttons/submitOver.gif',1)"><img src="Buttons/submitUp.gif" alt="Submit Form" name="submit" width="94" height="20" border="0"></a>

[Nico]

Hm, moving this to Javascript.

[UnrealEd]

give this a try:

Code:

<a href="javascript:document.forms['quickQuote'].submit()"><img src="Buttons/submitUp.gif" alt="Submit Form" name="submit" width="94" height="20" border="0" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('submit','','Buttons/submitOver.gif',1)"></a>

PS: there's also a button element in html, this might make it easier:

Code:

<button name="submit" type="submit"><img src="Buttons/submitUp.gif" alt="Submit Form" name="submit" width="94" height="20" border="0" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('submit','','Buttons/submitOver.gif',1)"></button>

this way you don't need javascript to submit the form

Greetz,
UnrealEd

[pwurg]

Try this sort of thing ...

<input name="Submit" type="image" value="Submit" src="go.gif" onmouseover="this.src='go2.gif'" onmouseout="this.src='go.gif'">


;-)

[mab]

LOL, that code was already suggested by Keith in the second post in this thread -

<input
type="image"
name="submit"
src="button1.gif"
onmouseover="this.src='button2.gif'"
onmouseout="this.src='button1.gif'"
/>