Adding an icon to form button

Question

I am using the following code to position an icon on top of a button:

    <a href="/users/hide_profile" class="button">
      <span class="hide_profile">hide public profile</span>
    </a>

a.button{
  background-image: url('/images/button.gif');
  display:inline-block;
  position: relative;
  _display: inline;
  color:#888888;
  font-weight:bold;
  height:30px;
  line-height:29px;
  margin-bottom:14px;
  text-decoration:none;
  width:191px; }
a:hover.button{ color:#0066CC; }

.hide_profile{
  background-image: url('/images/icons/hide.png');
  background-repeat: no-repeat;
  background-position:7px 6px; 
  font-size: 14px;
  text-indent:30px;
  display:block;
}

I'm using ruby on rails and am wondering how to do this for a form submit button. Any ideas?

Answer 1

Hi, maybe this can help you. Regards

Answer 2

You could do

<input type="image"
       src="url-where-your-image-lives"
       onclick="Element.up(this, 'form').submit()">

This assumes you're using the Prototype JavaScript library, which seems likely, since you're using RoR.