HI,
Nearly - but it stays highlighted even when the other three are moused over :
Well that's the way you would usually do it with css 
.
I think you need to consult the documentation for that spry menu as that behaviour would be controlled by the javascript.
It looks like the JS ads a class of "TabbedPanelsTabHover" and "TabbedPanelsTabSelected" dynamically to the element and therefore oyu only have one hook to change which means you can only refer to the same image which is waht is happening.
You had a rollover effect by changing the css from that described in the documentation and you applied hover effects to the tabs.
e.g. You had this:
.TabbedPanelsTab4:Hover
when in fact the documentation says this:
.TabbedPanelsTab4Hover
You also had this:
.TabbedPanelsTab4:Selected
which doesn't exist in CSS because there is no selected pseudo class.
One way you could get the effect you want is to make that rollover image as one image. e.g. one image is stacked above the other and then on hover you would change the background position.
e.g.
Code:
.TabbedPanelsTabHover {
background-position:0 -120px
}
.TabbedPanelsTabSelected {
background-position:0 -120px
}
You would define the initial tabs as before but the code could be shortened as follows.
Code:
.TabbedPanelsTab1,
.TabbedPanelsTab2,
.TabbedPanelsTab3,
.TabbedPanelsTab4 {
position: relative;
top: 0px;
float: left;
padding: 4px 0px;
margin: 0px 30px 0px 0px;
font: bold 1em sans-serif;
list-style: none;
color:#999999;
border-left: solid 1px #fff;
border-bottom: solid 1px #fff;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
width:80px;
height:110px;
text-align:center;
background:#fff url(http://www.pioneerautomotive.co.uk/step101.jpg) no-repeat 0 0;
}
.TabbedPanelsTab2{ background:#fff url(http://www.pioneerautomotive.co.uk/step102.jpg) no-repeat 0 0;}
.TabbedPanelsTab3{ background:#fff url(http://www.pioneerautomotive.co.uk/step103.jpg) no-repeat 0 0;}
.TabbedPanelsTab4{ background:#fff url(http://www.pioneerautomotive.co.uk/step104.jpg) no-repeat 0 0;}
* html #TabbedPanelsTab1 { /*IE 6 only CSS */
margin-left: 0px;
}
.TabbedPanelsTabHover {
background-position:0 -120px
}
.TabbedPanelsTabSelected {
background-position:0 -120px
}
That assumes that you have made those two states of the image into one image stacked one on top of the other and that they are are 120px high. On rollover the background position is shifted up to reveal the image that was below the fold.
I have tested this locally with an image I made up and it works fine.
Bookmarks