The way it's setup is that there's an image in 3 states in it (inactive, rollover, active), setup on the y-axis. So when a user rolls over it shoves the background down 111px to show the rollover, etc.
This works in IE 7/8 FF 2/3 Safaris and most likely everything else:
http://www.muchomungo.com/CrowdTwist/pa ... plate.html
Relevant CSS
Code: Select all
li {
list-style:none;
float:left;
}
ul {
list-style:none;
margin:0;
padding:0;
}
ul#toolbar a {
height: 111px;
display:block;
text-indent:-9999px;
font-size:0px;
line-height:0px;
outline: none;
}
#toolbar li.unselected:hover {
background-position:0px 222px;
}
#toolbar li.selected {
background-position: bottom;
height: 111px;
z-index: 10;
}
#toolbar li.unselected {
background-position: top;
margin-left:0px;
}
li#dashboard {
background-image:url("../../images/artist_center/nav_dashboard_mo.jpg");
width:112px;
height: 111px;
}
li#reporting {
background-image:url("../../images/artist_center/nav_reporting_mo.jpg");
width:103px;
height: 111px;
}
li#pointscales {
background-image:url("../../images/artist_center/nav_pointscales_mo.jpg");
width:109px;
height: 111px;
}
li#prizelocker {
background-image:url("../../images/artist_center/nav_prizelocker_mo.jpg");
width:114px;
height: 111px;
}
li#email {
background-image:url("../../images/artist_center/nav_email_mo.jpg");
width:104px;
height: 111px;
}
JS
Code: Select all
var currentSection = 'dashboard';
var newpane = function(gotoLink){
if (currentSection == gotoLink) {
return;
}
lastSection = currentSection;
currentSection = gotoLink;
// Change the section highlight.
// Extract the root section name, and use that to change the background image to 'top', revealing the alt. state
document.getElementById(currentSection).className = "selected";
if (lastSection) {
document.getElementById(lastSection).className = "unselected";
}
}