PDA

View Full Version : Custom Submit Buttons


Frank
05-07-2003, 09:17 PM
I'm looking to create a custom submit and reset button.

I have the images that I need. But the best I can do is have one of the images appear as a background on the standard button. By using

background-image: url(images/next_btn_on.gif);

Any ideas?

zoobie
05-07-2003, 10:06 PM
Well, what do you want? :confused:

<button type="reset" style="background-image: url(images/next_btn_on.gif);width:80px;height:30px;color:red;font:italic bold 14px tahoma; cursor:hand;border:1px magenta solid">RESET</button>

width:80px;height:30px is the image/button size...Drop the border and use background-color:transparent if the button image is rounded.

Richard
05-07-2003, 11:12 PM
<a href="javascript: document.Formname.submit();"><img src="images/next_btn_on.gif" border="0"></a>

And in the form tag: <form name="Formname">

Is that what you wanted ?

cg9com
05-08-2003, 10:30 AM
I'm not sure on <button> support, but i think its better to use <input>.
Try this:

<form method="post" action="mailto:cg9com@hotmail.com">
<textarea name="comment" rows=2 cols=40>
</textarea>
<input type="image" src="image.gif" />
</form>


type="image" will replace a submit button, reset it cannot emulate tho, I don't think.

Frank
05-08-2003, 02:10 PM
That is what I wanted, except to be able to mouseover and switch between images. Which I can do with a onMouseOver inside the button tag.

So its great, Thanks

Only one more question, do you know if that tag will work in NN, I have an old version that I use for testing and it doesn't seen to like it? Maybe version 6 or 7 will be different.

Anyway thanks again for all your help.

Frank
05-08-2003, 02:19 PM
Wow when I started my first reply there was only one message.
After I submited it there were two more.

I just whated to say thank you to zoobie, Richard and cg9com your ideas are great and I will try them all.

codingforums.com rocks!