JavaScript Trick

Want to spice up your web site with some easy JavaScript tricks? I’m going to show you how to make your buttons, text boxes, and textareas change their colors. All you need are four attributes and some additional functions in your javascript file. (If you want to learn about adding a javascript file to your site, read this.)

• onmouseover
• onmouseout
• onfocus
• onblur

First add the following code to your .js file:

function hoverItemOn(x) {
   x.style.backgroundColor = ‘#fff’;
   x.style.color = ‘#336699’;
}

function hoverItemOff(x) {
   x.style.backgroundColor = ‘#336699’;
   x.style.color = ‘#ffffff’;
}

Replace the color constants with the colors you want to use in your own site. Make sure that you don’t change a button or textbox to have the same background and foreground color. Tough to read when you do that! You’ll also want to make sure that you don’t do anything to conflict with any CSS formatting you’ve done to the INPUT object. I recommend using the same colors in your hoverItemOff function as you use normally to display any INPUT objects. But that’s just me.

Now you just need to call these guys from your page, right? We’ll do a textbox first. A textbox on your site probably looks like this:

<input type=”text” name=”query” size=”20″ value=”” />

We want the textbox to react to focus events. (When a user tabs or clicks in a textbox (or textarea), it is said to have the focus.) We’ll just add an onfocus and an onblur attribute to the textbox’s HTML. Try changing your code to this:

<input type=”text” name=”query” size=”20″ value=”” onfocus=”hoverItemOn(query); return false;” onblur=”hoverItemOff(query); return false;” />

That should do the trick. Now when the textbox receives the focus, it should call the hoverItemOn function, which will change its background and foreground color. When the textbox loses the focus, it will call the hoverItemOff function. Easy, right?

Now we’ll play with a button. If you have a search button, for example, it probably looks something like this:

<input type=”submit” value=”Search!” />

You’ll have to add a name attribute for the JavaScript function to work. So add

name=”search”

to your button’s HTML. Now you have:

<input type=”submit” value=”Search!” name=”search” />

We want our button to change colors if the user lets the mouse-pointer hover over it, and if the user tabs to it. So we’ll add all four extra attributes to it:

<input type=”submit” value=”Search!” name=”search” onfocus=”hoverItemOn(search); return false;” onblur=”hoverItemOff(search); return false;” onmouseover=”hoverItemOn(search); return false;” onmouseout=”hoverItemOff(search); return false;”/>

And there you go. That should work pleasantly in most browsers and it shouldn’t fail in any. I’ve used this trick in my sidebar and in my individual entries template and it seems to work without a hitch. The pages still validate as XHTML1.0 Transitional.

You could add the onmouseover and onmouseout attributes to textboxes and/or textareas if you want (I think!). I think that doing that is a bit much, but feel free to play. And you aren’t required to use onfocus and onblur with buttons, of course. Is this a neat trick or what?