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?

portions stolen from Richard’s Dish

There are 8 comments on this post

  1. This was very helpful, thanks.

  2. Just the example i needed to see.

  3. Thanks for this excellent tutorial on CSS buttons, it has helped me a lot

  4. Sir .i am IT student i want javascript programes codeing please send me some codeing .

  5. Cool Stuff, I implemented your JavaScript for a Web Custom Control in ASP.NET that extends the textbox control..see it at

    http://www.qnal.net/cgi-bin/mt/mt-tb.cgi/123

  6. good presentation

  7. Good show but if I”m not mistaken, can’t you do that with CSS stylesheets?

Add to the discussion:

I'll never share your email address and it won't be published.

What Is This?

davidgagne.net is the personal weblog of me, David Vincent Gagne. I've been publishing here since 1999, which makes this one of the oldest continuously-updated websites on the Internet.

bartender.live

A few years ago I was trying to determine what cocktails I could make with the alcohol I had at home. I searched the App Store but couldn't find an app that would let me do that, so I built one.

Hemingway

You can read dozens of essays and articles and find hundreds of links to other sites with stories and information about Ernest Hemingway in The Hemingway Collection.