Single Image CSS Rollover???

[TheJoshMan]

Ok, so I've been trying my best to correctly code what seemed to be EXTREMELY simple, but I can't get it to work! Below is the code I'm using and a link to a test page I've been trying it with.

CSS Code:


.rollover{
height:22px;
width:109px;
background-image:url('Button.jpg');
}
.rollover a:link{
background-image:url('Button.jpg');
height:22px;
width:109px;
}
.rollover a:hover{
background-image:url('Button.jpg');
height:22px;
width:109px;
background-position:-109px 0;
}
.rollover a:active{
background-image:url('Button.jpg');
height:22px;
width:109px;
background-position:-109px 0;
}
.rollover a:visited{
background-image:url('Button.jpg');
height:22px;
width:109px;
background-position:-109px 0;
}


HTML Code:


<a href="#" class="rollover"> &nbsp; </a>


http://www.mrsjonesandme.com/Test.html

[Medyman]

a.rollover{
height:22px;
width:109px;
background: url('Button.jpg') no-repeat top left;
}

a:hover.rollover {
background:url('Button.jpg') no-repeat top right;
height:22px;
width:109px;
}

That's all you need. You have to be mindful of the CSS heirarchy.

The way you have it, it's saying apply those styles to an <a> element within an element with a class or rollover. But really your anchor element has that class, so you want a.rollover and a:hover.rollever

No need for the visited, active, etc...