Change 'submit' button images

[davewylie]

Does anyone have any ideas on how to change how submit buttons can be changed from the default? I think it is a real shortcoming of HTML that onmouseup and onmousedown etc are not permitted with <input type='submit'.... I just feel there must be some clever way using javascript or something similar to give this effect.

btw, I have tried using the <button type="submit"... tag, <a href="Javascript:document.formName.submit()" ... tag, <img src ="pic.gif" ... tag, but cannot get them to work with my javascript validation routine.

Thanks, Dave.

Have you tried googling?
Second item in search:

http://www.dynamicdrive.com/style/csslibrary/item/stylish-submit-buttons/

I find Google saves a lot of work.

[davewylie]

Oh yes, I have been Googling for days, but I can't find anything that does what I want to do.

get back to me if that link doesn't do what you need

[davewylie]

Thanks ardev, but I had fonud this page earlier. The trouble is that you can't generate onmousedown and onmouseup actions with stylesheets, and that's the stumbling block for me.

Dave.

[almostbob]

a submit button 'onmousedown' is onsubmit in the parent <form>
a submit button has no 'onmouseup' because the form has already been submitted,

[davewylie]

No, you're right, I really meant onmouseover and onmouseout.

Dave.

[BzzBee]

use javascript code for that.

[BzzBee]

try it

make two image shaped as buttons and named them as icon1 and icon2 and apply this code

<script type="application/javascript">
function roll_over(img_name, img_src)
   {
   document[img_name].src = img_src;
   }
</script>

<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')"
onmouseout="roll_over('but1', 'icon1.gif')">
<IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>

What is it exactly that you're trying to do? Just change the look and feel or apply js functions to stop automatic submission?

The onsumbit could be used to run a js function, that if returned true proceeded the submit the form, but if false returned a message - is that it? Are you trying to validate the form before submitting it? If so there are loads of great scripts out there (YAV is a personal favourite).

[almostbob]

button { background-color: #e4e0d8; } 
button:hover { background-color: #66cdaa; } 
button:active { background-color: #66cdaa;  } 
button:focus { background-color: #66cdaa; } 
form { PADDING: 1px; margin: 1px; }
img { border: 0px; }
input { background-color: #efefef; border: 0px; border-bottom: 1px solid #000000; }
input:hover { background-color: #dfdfdf; }
input:focus { background-color: #dfdfdf; border-bottom: 1px solid #101010; }
input:active { background-color: #dfdfdf; border-bottom: 1px solid #101010;}
input[type=button] { background-color: #e4e0d8;  }
input[type=button]:hover { background-color: #66aaaa; }
input[type=button]:focus { background-color: #66cdcc; }
input[type=button]:active { background-color: #66cdff; }
input[type=submit] { background-color: #e4e0d8;  }
input[type=submit]:hover { background-color: #66cdaa; }
input[type=submit]:focus { background-color: #66edea; }
input[type=submit]:active { background-color: #669d9a; }

snipped from my .css I dont use images slows down loading, here in rural dial up land, but css four state works for inputs

[sureronald]

Hi Davewylie. Have you tried using css? You can easily format the submit buttons apart from using images

Apparently not, I showed him a link (previous post) that was pure CSS (no JS) - not what he was after. AB's CSS is v. nice w/out images. Can't see why JS-less solution is not acceptable.

[davewylie]

This what I am doing. I have 2 submit buttons, which send the user off to 2 different pages. But before sending them off, I do some validation using javascript, and the javascript needs to know which buton has been clicked, as the processing differs slightly. Fine so far, I can do this. But then I want to use 3-d image buttons instead of the the standard buttons, so that they match my other 3-d buttons. It looks odd having a row of odd buttons at the bottom of the page.

Dave.

So what's wrong with the CSS to design your buttons? You can do almostbob's or cssdrive's CSS - both work.

You want a hover, (possibly focus), active states - basic css. What else?

[almostbob]

the javascript needs to know which buton has been clicked, as the processing differs slightly.

<script type='text/javascript'>
<!--
function validate(text) {
if (text=='process1' ) {/* do something*/}
else {/* do something else*/ }
}
-->
</script>
<form onsubmit='validate("submitbtn");'>
<!-- bla bla -->
<input type='submit' name='submitbtn' value='process1'>
<input type='submit' name='submitbtn' value='process2'>
</form>

unchecked code, thought process only

[davewylie]

Thanks guys, you've given me food for thought. I'll try playing around with CSS.

Dave.

[somedude3488]

Be aware that hover in css on non anchor tags does not work well on all browsers. I had this problem with my last site.