Okay, In the comps.language.javascript newsgroup, I was convinced to
use CSS Rollovers instead of javascript. The first rollover went
great. Although I can't get the text to align vertically in the
middle, It's a much cleaner way to do it and it works okay.
However, my second rollover is not as good. This one has no text over
the button, and the CSS looks like this:
a.go:link{
background-image: url(images/Home_08.jpg);
text-decoration: none;
height: 30px;
width: 41px; }
a.go:visited {
text-decoration: none;
height: 30px;
width: 41px; }
a.go:active {
text-decoration: none;
height: 30px;
width: 41px; }
a.go:hover{
background-image: url(images/Home_08_over.jpg);
text-decoration: none;
height: 30px;
width: 41px; }
It's pretty much the same one as my first one, but without the extra
text attributes. My HTML looks like this:
<TD width="41">
<a class="go" href="#"> </a>
</TD>
My problem is that when I display my page, nothing shows up in that
cell until I move the mouse over it, and then the rollover image shows
up. When I move it off the cell -- poof -- no image again. I checked
the filename and everything is correct, but no image is showing when
the cursor is not in the section.
This, of course, is not acceptable. Can anyone please help me? Thanks
so much!
