help with placing text in buttons

[jc_gmk]

I'm not sure if what i'm asking is correct but...

I am trying to make a some buttons on my web page;
When the mouse is hovered over them, they change to a differant image
using onmouseout and onmouseover
This all works fine,

the problem comes when I put text over the image (using a div),
if I then hover the mouse over that text, the image below does not change because it's not actually being hovered over.

Is there any way I can add text to a button using html rather than editing the image to display the text. Making it more search engine friendly.

[Veronica]

Actually, you could do both the image and the text with css.

For your button:

<span id="button1"><a href="link1.htm">Button1</a></span>

And for your css

<style>
#button1 a {
text-decoration:none;
font-weight:bold;
border:3px solid;
padding:2px;
border-color:red;
background:#ffffff;
background:url("image_nohover.gif");
background-repeat: no-repeat;
background-position:center;
    }
#button1 a:hover {
text-decoration:none;
font-weight:bold;
border:3px solid;
padding:2px;
border-color:blue;
background:#ffffff;
background:url("image_hover.gif");
background-repeat: no-repeat;
background-position:center;
    }
</style>

You would also set the styles for A:visited and A:active