CSS onMouseover using both image and text

hello,

I did search the forum for this but it may be unique, I am using css onmouseover effect to change the background image of my menu from one image to the other to ceate the lighted effect. I am also using text display over these images. The text also "lights-up" with the hover effect. the problem i have though is I would like the text part to "light-up" with the image when the cursor is over the image.... not like it is now with the image lighting up before the text.

see URL for details.

I realize I could just use an image entirly, but since my menu is generated by php, this is not an option.

Edit I did find one source for getByID, but i cannot seem to make it work.... help is appreciated.

Thanks in advance,

you should change the style of the text, along with the background image. you should also preload your images.

exaclty what he said, but i need it to work in this php code

You could generate the javascript with PHP as well... instead of trying to stuff it all into the onmouseover, do it as a dynamically generated function.

I'm having trouble understanding. Do you think you can post an example.

Thanks

Ok, I've started trying to pre-load images and do the swapping image thing, but I just cannot seem to make it work this way now. I need a little bit of help with it please. Also I would like for the text to change its color too when the cursor is over the image. Not sure how to do this either. Below is the javascript code I am using.

<SCRIPT LANGUAGE="JavaScript">
<!-- hide from none JavaScript Browsers

Image1 = new Image(140,24)
Image1.src = "images/menuin.gif"

Image2 = new Image(140,24)
Image2.src = "images/menuout.gif"

function SwapOut() {
document.imageflip.src = Image2.src; return true;
}

function SwapBack() {
document.imageflip.src = Image1.src; return true;
}

// End -->
</SCRIPT>

And here is a sample of the table that I'm trying to affect.

<?php
}

function theme_draw_menu_item( $text, $link )
{
return "<tr name=\"imageflip\" class=\"none\" height=\"24\"><td align=\"center\" valign=\"middle\" background=\"images/menuout.gif\" onmouseover=\"SwapOut()\" onMouseOut=\"SwapBack()\" onClick=\"location.href='$link'\"><a id=\"menutext\" class=\"menutext\" href=\"$link\">$text</a></td></tr>\n";
}
?>

I am using PHP code to dynamically create a menu, so it is important that the text links "over" the buttons remain text.