Continuing on from yesterday's tutorial, Error Output With Scriptaculous, in which we got started with a nice little login form showing off simple validation and error output with Scriptaculous, I decided today we would add onto that form a little bit.  One neat thing that you can accomplish in creating your forms in HTML is the use of a custom "submit button". 

By defining your submit button as an image, you can use any image file to replace the standard grey HTML button you see sprinkled all over the web.  In order to do this, you simply change the HTML code you use in your form.

Previously we were using the code:

<input type="submit" value="Login" />

Now obviously, this got the job done but we would like for our site visitors to have a nice themed experience when logging in, so let's style it up!  To do so, simply change the "type" attribute and define a "src" attribute on your input element, leaving your code looking like

<input type="image" src="./images/submit_button.jpg" />

The "src" is the path to the image you want to use.  I decided I wanted to spruce things up a little more and give the submit button some flare, adding a rollover state to it.  In order to do so, I first prepped my image file in Photoshop, leaving me with a two state image:



As you can see, both the on and off states are visible in this image. Why wouldn't I separate them out into individual image files?  Well the answer is, there is no need to with the use of CSS (and afterall, I'd rather only have to worry about loading one image on the client side than two).

How exactly is this accomplished?  Well for starters, we need to simplify the markup for our submit button.  Start by changing the attributes of the "input" element, defining "type","class", and a blank "value":

input type="submit" class="submit" value="" />

Before the CSS is added, we are left with a small non-user friendly button.  By defining the "submit" class that we just attached to our "input" element, we can all at once implement our image as the button.

.submit
{
    background: url(./images/submit_button.jpg) no-repeat;
    height: 42px;
    width: 130px;
    border: none;
}

In this CSS class we are setting the background image, height and width, and stripping the element of its default browser-styled HTML border.  The button is perfectly functional!  However, we still want to add the hover state.  In order to do so, we simply need to define a hover state for the "submit" class.

.submit:hover
 {
     background: url(./images/submit_button.jpg) 0 -42px no-repeat;
 }

In this code, we are leaving all the attributes the same except for the background property, which we are adjusting the background position with a height of -42px.

View Image as a Submit Button with Hover Example

Voila!  There you have some nice little CSS submit button magic.  Note, the hover state will not work in Internet Explorer 6, which does not recognize :hover classes in CSS.  There is an easy way to work around this, which I will uncover in the not so distant future.

With the release of the new Scriptaculous 1.7.0 Beta, Thomas Fuchs has introduced a new effect, morph.  The syntax for this new feature is quite easy to grasp.  Simply call the function on the element you wish to morph.

$('my_element').morph();

You can also pass this function arguments to define CSS properties on the fly.

$('my_element').morph({fontSize: '12px', color: '#7F1123'});

Here is an example of the Scriptaculous morph function and how it can be used.

The code I used in my example was quite simple.  I set some default values in CSS for the element I was going to morph.  Then I created some anchor text, in which I tacked on a onclick behavior that called the morph() function.  This is what my markup looks like:

<div id="change_me">Watch me morph!  Click Below!</div>
<a href="#" onclick="$('change_me').morph({fontSize:'36px',color:'#7F1123'}); return false;">Click Here</a>

The magic is primarily done in defining the initial CSS values and passing your new ones to the function.  Pretty handy!

Note– using this method requires the newest beta release of Scriptaculous.  The download is available toward the bottom of this page on mir.aculo.us.  Direct download link.