CSS-Only Rollover Buttons

I have done rollover buttons the same way for a long time now:

• Create 2 images - one "active" and one "inactive"
  
• Use a JavaScript function, launched onLoad, to preload the "active" image
  
• Use another JavaScript function, fired onMouseOver and onMouseOut, to change the source of the image object when the user mouses over it.

It always worked before. On a recent project, however, IE was giving me fits because it kept trying to reload the "active" image on every mouse over. This caused a very annoying flicker effect.

I assumed that it was some problem with my preload function and in a search for a solution I discovered a whole new way to do rollovers without a preload - without any JavaScript at all in fact. Here is the basic idea:

• Create 1 image that has both the "active" and "inactive" parts side by side
  
• Code a DIV tag that contains a link (A tag)
  
• Use CSS settings to change the offset of the background for the DIV and A tags

Since only one image is used, there is no need for a preload function. This method also works faster than the old way.

Here is an illustration of an example I put together with Home and Contact Us buttons:

To start, we need an image that contains both the "active" (yellow) and "inactive" (blue) parts for each button. Here is the home button:

The image is 300 pixels wide, which is important to know since we are going to offset this to only display half the image at any one time. It is 35 pixels high.

Now let's look at the HTML:

<div id="nav-container">
   <div id="home-button" class="nav-button">
      <a href="../index.htm"></a>
   </div>
   <div id="contact-button" class="nav-button">
      <a href="../contact-us.php"></a>
   </div>
</div>

First, we have an outside container DIV for the whole set of buttons (nav-container) that we can use to position the entire set of buttons on the page. Inside that, we have two DIV's - one for each button - that use the CSS class "nav-button". Each of those contain an empty A tag.

Now the CSS. First, we set the position of the outer container from the top left corner of the page:

#nav-container{
position:absolute;
top:25px;
left:25px;
}

Next, we will define the nav-button class:

.nav-button{
width:150px;
height:35px;
position:absolute;
top:0px;
}

Note the height and width settings: the width is half the width of the image. We set the top position from the top of the outer container, but not left as that will be different for each button.

Now we specify the settings for the anchor tags contained in the button DIV's:

#home-button a, #contact-button a{
display:block;
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
background-image:none;
}

These define the link as a block that is the exact same size as the DIV that contains it. Notice that the background image is set to none. Notice also that I set this for each button's DIV. I tried doing it as a class, which would have made more sense, but that seemed to cause problems in IE8.

Now we have to specify two settings for each button: the background and left position of the DIV tag and the background of the hover state of the A tag, which is actually the same image with a different offset:

#home-button{
left:0px;
background:url('home_button.gif') top left no-repeat;
}
#home-button a:hover{
background:url('home_button.gif') -150px 0 no-repeat;
}

For the Home button DIV, we set the left position to 0, since it is the first button. We set the background image with no offset, so it will display the left 150 pixels of our image (the blue "inactive" button). Then for the Home button's anchor, we set a background for the hover state. It is the same image but it has a 150 pixel offset so that you see the right part of the image (the yellow "active" button). I don't really know why the offset is specified like that. It threw me at first, but play with it and you will figure it out.

So, when you mouse over the link you trigger the hover state, which causes the background image for the link to change from none to the offset background, which covers up the background being used for the DIV tag beneath. When you mouse off the link, the background reverts to none and the background of the DIV shows through again.

All that's left is to specify similar settings for the Contact Us button:

#contact-button{
left:160px;
background:url('contact_button.gif') top left no-repeat;
}
#contact-button a:hover{
background:url('contact_button.gif') -150px 0 no-repeat;
}

Same as the Home button except for the image name and the left position (the width of the home button plus a 10 pixel space).

Voila. No preload, no JavaScript, fewer images, better all around.

Obviously, I didn't come up with this on my own. I got the idea from Petr Stanicek's tutorial and made some adaptations. If you like, check out the demo page on my site where you can view the source and the entire CSS for this neat trick.

Validating Form Entries with JavaScript PS

OK. Being new to Blogger, I didn't realize how to correctly post code samples to an entry. Hence the screen captures in my last post. Below is a copy-and-paste-friendly version of the whole page of code I used for that example.

<html>
<head>
<script type="text/JavaScript">
<!--
function check_form_data()
{
  if (document.the_form.email.value == "")
  {
    alert("Email is a required field. Please fill it in.");
    document.the_form.email.focus();
    document.the_form.email.style.background = "#EEF111";
    return;
  }else{
    document.the_form.submit();
  }
}
// -->
</script>
</head>

<body>
<?php
if (isset($_POST['test_val'])){
  process_form();
}else{
  print_form();
}

function print_form(){
  print <<< FORM_TEXT
    <!--Note that the action just points back to the same page-->
    <form name="the_form" method="POST" action="this_page.php">
    <!--Here is our test value-->
    <input type="hidden" value="1" name="test_val">
    Email: <input type="text" id="email" size="20"><br>
    <input type="button" onClick="check_form_data();" value="Submit">
    </form>
  FORM_TEXT;
}

function process_form(){
  //Process the form data - send an email, write to a DB, whatever.
}
?>
</body>
</html>

Validating Form Entries with JavaScript

I use HTML forms quite a lot on the web sites I build for a variety of purposes. Most of the ones I build these days are self-handling PHP forms. This means that the form and the PHP that handles the form are on the same page. This is easy to do. You just put a hidden value in the form that gets set when the visitor submits the form. The PHP code checks for that value. If it's set, it does the processing. If it's not set, it displays the form. The basic code layout looks something like this:

In the first part of the PHP, we check to see if the hidden value "test_val" is set. If it is, process_form(), otherwise print_form(). Nothing to it.

We can have process_form() do just about anything with the submitted data. What we don't want it doing is trying to process form data that cannot, or should not, be processed. We may have certain fields that are required. We may have fields where the input has to be in a certain format or match certain criteria. Of course, we also don't want to be processing anything that is clearly the work of a spambot. We could handle all of this on the server side and in some cases where more complex validation is needed, this might be appropriate. But why have our server waste processing cycles doing simple checks for missing or garbage data? Let the requesting browser do it by giving the data a quick once-over with client-side JavaScript first.

The first thing that we have to do is intercept the form data before it gets sent to the server. To do this, we will replace the usual HTML form SUBMIT button with a generic button that launches our JavaScript when clicked, like this:

For illustration, let's plug this into a simple form that collects an email address:

Now let's assume that we want to do a simple validation to make sure that the email field is not blank when submitted. The basic layout of our JavaScript function (placed in the HEAD) could look something like this:



We check to see if the email value is blank. If it is, we throw an alert and exit the function. Otherwise, we call the JavaScript submit function, which sends the validated form data on its merry way.

Of course, the validation we have done here is very simple. We could check to see that the value of the email field matches the proper format for an email address. We could write a loop to systematically check multiple required fields. We could check to see that multiple fields do not contain the same value - an annoying spambot symptom. We could even dynamically add additional fields to the form based on the visitor's initial inputs. There is loads more we could do.

In our simple example, we could help the visitor even more by sending their cursor directly to the email field:

We could even highlight the field in yellow to further alert the visitor to the problematic field:

This is especially useful if you are checking and flagging multiple fields. You can focus the visitor's cursor on the first problem field, but highlight them all so that they see all the problems. Just remember to reset the highlight color back to the default for all fields at the start of your function, otherwise the fields that your visitor did fix will still be highlighted.

Certainly nothing groundbreaking here, but useful stuff. There are tons of examples of this out there and the complexity of your validation is really only limited by your knowledge of JavaScript.