Rollover with no Title

Hi:

I am intended upon a development including rollovers with images but with no letters using CSS. Thus, I would like the same result as using rollovers with Javascript code generated, for example, by Dreamweaver.

I have tried once and again, by I am afraid that my knowledge of and practice in CSS programming is not enough to reach the desirable result.

If such a result is possible using just xhtml and css, for I want a code according to the purest code standards.

For starting, the example of html code would be like this:

(……)

• Lorem ipsum

(……)

And the CSS would be:

(……)

A:link {
COLOR: #666666; BACKGROUND-COLOR: #95b7cd; TEXT-DECORATION: none
}
A:visited {
COLOR: #666666; BACKGROUND-COLOR: #95b7cd; TEXT-DECORATION: line-through
}
A:hover {
BACKGROUND-COLOR: #aaddee
}
A:active {
BACKGROUND-COLOR: #3cc7f0
}

(…)

#navbar {
FONT-WEIGHT: bold; LEFT: 0px; WIDTH: 198px; POSITION: absolute; TOP: 0px
}
#navbar UL LI A:link {
DISPLAY: block; PADDING-LEFT: 20px; FONT-WEIGHT: bold; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px solid; TEXT-DECORATION: none
}
#navbar UL LI A:visited {
DISPLAY: block; PADDING-LEFT: 20px; FONT-WEIGHT: bold; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px solid; TEXT-DECORATION: none
}
#navbar UL LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#navbar UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}

Now, I would like to change the “lorem ipsum” text in the anchor

Is this effect possible?

In the other hand, is it possible to reach an acceptable result in the most important Internet browsers?

Thanking you in advance for all your replies to this subject,

Best wishes

José Manuel Rosón Bravo (Northern Spain)