Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Anythingslider problem – Active page Re: Anythingslider problem – Active page

#92006
Mottie
Member

Try this method…

CSS

#externalNav img {
float: left;
}
#externalNav a {
float: left;
width : 60px;
height : 88px;
overflow: hidden;
}
#externalNav a span {
text-indent: -9999em;
display: block;
}
.tab-why { background-image: url(../images/navbar/bottom-01-white.png); }
.tab-health { background-image: url(../images/navbar/bottom-02-white.png); }
.tab-family { background-image: url(../images/navbar/bottom-03-white.png); }
.tab-how { background-image: url(../images/navbar/bottom-04-white.png); }
.tab-profs { background-image: url(../images/navbar/bottom-05-white.png); }
.tab-join { background-image: url(../images/navbar/bottom-06-white.png); }
.tab-about { background-image: url(../images/navbar/bottom-07-white.png); }

.tab-why.current, .tab-why:hover { background-image: url(../images/navbar/bottom-01-yellow.png); }
.tab-health.current, .tab-health:hover { background-image: url(../images/navbar/bottom-02-yellow.png); }
.tab-family.current, .tab-family:hover { background-image: url(../images/navbar/bottom-03-yellow.png); }
.tab-how.current, .tab-how:hover { background-image: url(../images/navbar/bottom-04-yellow.png); }
.tab-profs.current, .tab-profs:hover { background-image: url(../images/navbar/bottom-05-yellow.png); }
.tab-join.current, .tab-join:hover { background-image: url(../images/navbar/bottom-06-yellow.png); }
.tab-about.current, .tab-about:hover { background-image: url(../images/navbar/bottom-07-yellow.png); }

.clear { clear: both; }

and change the HTML to this:

It would be even better if you made an image sprite with all of the images combined.