CSS, Rollover and Link Title

Hi:

In my seeking for the way to implement a rollover using transitional images based strictly on xhtml and css, I need to develop a system that show the two images in active and hover, but no link title.

Therefore, I have eventually come across a good example of coding specially designed to cover text with images present only in the css file. In the case the image is not shown by the browser or the computing system, a text edited in simple font is shown to replace it.

You can see the result by yourselves:

http://wellstyled.com/files/css-replace-text-by-image/example02.html

In the next paragraph, the article presents a similar solution to display an image-based rollover with no title in the following web address:

http://wellstyled.com/files/css-replace-text-by-image/example03.html

Nevertheless, as you will see, it is implemented using this piece of coding:

#chapter-one a span { display:none }

which means that the link text is not behind the rolling images, but completely hidden. Thus, if the images fail to show, there is no link at all. No images, no link text, … nothing.

I am trying to combine the example2 and the example3 in a way to implement a button based on rollover images as in example3, but also offering the alternative link text behind the images as in example2.

And, of course, I am having some problems.

Is there anyone who might solve this riddle without using the classic solutions (padding-top, display:none, etc.), but applying the same system presented in the example2?

In such a case, thank you for your help and interest.

Anyway, I consider it to be a much interesting problem that might offer a solution to this and other issues.

José Manuel Rosón Bravo
(Northern Spain)