How to change from images to a background color change?

[TiYogi]

:confused:

I have a web site for my archery club and I wanted to put a view of how the scoring is to be done.
I found a piece of Javascript and CSS coding that almost fits the problem.
But the problem is I really don't know enough of the programing to change it . So I am asking for a little help.
Currently the code uses a gif image for buttons.
What I would like to do is to change it to a simple background color change.
Like the example on this page.
Example Page (http://www.htmlcenter.com/tutorials/tutorials.cfm/154/CSS/)

Here is what my page looks like.
My mouseover page (http://home.att.net/~tiyogi2/new_3d/multipe_mouseovers_00n.htm)

I hope I have explained what I want to do.

[Paul Jr]

Your mouseover link leads to a blank page.

[TiYogi]

Hi Paul,
yes for right know it leads to a blank page.

I will fix it once I find out how I can change the Blue gif to plain text.
I just want plain text to have a background color change . I do not want to have to us a gif button or image.

You see the gif I am using is 10k where as plain text is nothing . Why waste the time to down load 10k when there is a way of doing the samething for less. I am on a dail up and it take awhile to download even 10k if you multiply it by 8 .

So how to I change the gif to plain text?

[PunkSktBrdr01]

Well, if you want, for example, to have the "Superkill" text on a red background, you use:


<style type="text/css">
.buttons a {
width: 100px;
height: auto;
text-align: center;
color: #000000;
background-color: #FF0000;
}
.buttons a:hover, .buttons a:active {
background-color: #0000FF;
}
</style>


To use this, make replace each image with <a href="#" class="buttons">...</a>. When the mouse is off the link, it will have a red background, and when the mouse is on, it will have a blue background.