CodeFoot.com: JavaScript: Changing TextArea Background Images On Mouseover

Changing TextArea Background Images on MouseOver

INSTRUCTIONS:
=============

This is a fairly straightforward technique,
which works well in both IE and NS6+ (degrades
gracefully in older browsers).

Just place the style script below in the
<head> of your page, add the class= and the mouse
event calls to the textarea tag, and you're done.

Step 1.:
--------

Place this style script in the <head> of the page:

Change the images to your own, of course; and also
see the notes at the end.

Step 2.:
--------

Set up your <textarea> like this:

Script Notes.:
--------------

In the style script, note that we set the background-color:000000;

This should usually be the same color as your image background colors,
and it's done to prevent flashing while the images are actually loaded.

Setting the color:ff0000; and color:00ff00; sets the text colors to red
and green, respectively, in this example; so change them to the colors
you wish to use in your design.

Note also that in IE, the images will scroll with the text; but with
NS6+'s less dynamic object model, the images may remain static.

Comments

This script shows how to add images to the background of a textarea that will change on mouseover. An additional feature changes the text color on mouseover, as well.

See the instructions in the script for installation directions. The textarea above is, itself, the demo.