|
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 coding 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:
(……)
<DIV id=navbar>
<UL>
<LI><A href="home.html/">Lorem ipsum</A>
(……)
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 <LI><A href="home.html/">Lorem ipsum</A> for just an image that we shall call IMAGEA that would eventually change to IMAGEB in Hover.
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)
|
