menu/button - image rollover to css text

[questions]

Hi,

I'm trying to simplify and cut down on images and so decided to see if possible to have an image that then rolls over to just css text. So I did this and the issue is that the text is showing up on top of the image.

Also wonder if I can just define the color of all the buttons and the text that you will see when rolling over at only one place.

CSS
#menu-acuarele {
display: block;
width: 200px;
height: 53px;
background: url('menu-acuarele.jpg');
}
#menu-acuarele:hover {
background: #ffffff; color: #e23c29;
font: bold 0.8em;
}

HTML
<td width="207" align="center"><a href="#" id="menu-acuarele">acuarele</a></td>

THANKS!

[questions]

I found this but it's actually a hybrid of image with text on top.
http://articles.techrepublic.com.com/5100-10878_11-5345057.html
What I want is an image that then goes away and only see text.

[TheJoshMan]

If you are attempting to cut down on bandwidth, then the most logical solution would be to use CSS sprites. The general concept is that you have ONE image which consists of a whole lot of images spaced out evenly. You then use CSS positioning to maneuver that image into the area you want it to show up in and adjust the size accordingly. By doing this, you only cause ONE http request to the server. This will drastically reduce your bandwidth on a busy site.

If you don't know how/don't have the time to make CSS sprites, there is a site which will automatically generate them for you. See below.

http://spritegen.website-performance.org/

[TheJoshMan]

You can also learn more about CSS sprites by reading this article by "A list apart"

http://www.alistapart.com/articles/sprites

[questions]

Thanks. I'll look into that. But do you know if what I was asking for is possible. The reason for that is that I am going to be adding and subtracting buttons sporadically in time and they will be moved around for graphic purposes and so I'd like to keep each button still separate.

THANKS!

[TheJoshMan]

My first response would be to tell you that I really couldn't tell you... However, even though I'm not sure if this is possible, one thought seems to come to mind.

Try creating a DIV which holds the text, give it a "z-index" which will be lower than the "z-index" of the button. Does that make sense?

Basically in a sense, you'll just be covering up the text with a button.

Then on the ":hover" state, change the "z-index" so that the button is lower than the DIV you created to hold the text.

Not sure if it will work, but that's the first idea that comes to my mind.

[TheJoshMan]

haha, disregard my previous post. Unless I'm missing something very simple, that idea is impossible. I just tested every possible method I could think of with no luck.

If I come up with any ideas, I'll post it here.