How to have a CSS Sprite "Button" Default to ON/PRESSED on Page Load

I'm new to CSS and web design in general. I created a CSS sprite sheet of sorts that corresponds to 3 "buttons" or "links" on the page. These buttons have a default position of OFF and when clicked on (or hovered over) they have a position of ON.
I'd like one of them to default to the ON position when the page is loaded. Can someone help me do this with CSS? Here's the CSS I'm using.
PS - branch0 is the one I want to default to ON.

   /*--- Set Sprite Image ---*/
#branch0,
#branch1,
#branch2
{background-image : url('images/sprite2.jpg');}
#branch_buttons #branch0{width:300px; height:65px; background-position:0 0;} 
#branch_buttons #branch1{width:300px; height:65px; background-position:left -66px;}
#branch_buttons #branch2{width:300px; height:65px; background-position:left -131px;}
   /* Hover/Focus State */
#branch_buttons #branch0:hover,#branch_buttons #branch0:focus, #branch_buttons #branch0.current{width:300px; height:65px; background-position:-301px top;}
#branch_buttons #branch1:hover,#branch_buttons #branch1:focus, #branch_buttons #branch1.current{width:300px; height:65px; background-position:-301px -66px;}
#branch_buttons #branch2:hover,#branch_buttons #branch2:focus, #branch_buttons #branch2.current{width:300px; height:65px; background-position:-301px -131px;}
   /* Active */
#branch_buttons #branch0:active{background-position:left -195px;}
#branch_buttons #branch1:active{background-position:left -261px;}
#branch_buttons #branch2:active{background-position:left -326px;}

Open in new window

LVL 1
homerslmpsonAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented: 
   /*--- Set Sprite Image ---*/
#branch0,
#branch1,
#branch2
{background-image : url('images/sprite2.jpg');}
#branch_buttons #branch1{width:300px; height:65px; background-position:left -66px;}
#branch_buttons #branch2{width:300px; height:65px; background-position:left -131px;}
   /* Hover/Focus State */
#branch_buttons #branch0, #branch_buttons #branch0:hover,#branch_buttons #branch0:focus, #branch_buttons #branch0.current{width:300px; height:65px; background-position:-301px top;}
#branch_buttons #branch1:hover,#branch_buttons #branch1:focus, #branch_buttons #branch1.current{width:300px; height:65px; background-position:-301px -66px;}
#branch_buttons #branch2:hover,#branch_buttons #branch2:focus, #branch_buttons #branch2.current{width:300px; height:65px; background-position:-301px -131px;}
   /* Active */
#branch_buttons #branch0:active{background-position:left -195px;}
#branch_buttons #branch1:active{background-position:left -261px;}
#branch_buttons #branch2:active{background-position:left -326px;}

Open in new window

homerslmpsonAuthor Commented:
The code you gave me is defaulting branch0 to the ON position which is what I wanted but unfortunately it isn't going to the OFF position when you click the other buttons.
GaryCommented: 
   /*--- Set Sprite Image ---*/
#branch0,
#branch1,
#branch2
{background-image : url('images/sprite2.jpg');}
#branch_buttons #branch0{width:300px; height:65px; background-position:0 0;} 
#branch_buttons #branch1{width:300px; height:65px; background-position:left -66px;}
#branch_buttons #branch2{width:300px; height:65px; background-position:left -131px;}
   /* Hover/Focus State */
#branch_buttons #branch0,#branch_buttons #branch0:hover,#branch_buttons #branch0:focus, #branch_buttons #branch0.current{width:300px; height:65px; background-position:-301px top;}
#branch_buttons #branch1:hover,#branch_buttons #branch1:focus, #branch_buttons #branch1.current{width:300px; height:65px; background-position:-301px -66px;}
#branch_buttons #branch2:hover,#branch_buttons #branch2:focus, #branch_buttons #branch2.current{width:300px; height:65px; background-position:-301px -131px;}
   /* Active */
#branch_buttons #branch0:active{background-position:left -195px;}
#branch_buttons #branch1:active{background-position:left -261px;}
#branch_buttons #branch2:active{background-position:left -326px;}

Open in new window

Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Download eBook now!
homerslmpsonAuthor Commented:
Still no luck. Same result. Branch0 stays in ON position indefinitely.
GaryCommented:
This might be easier to just give branch0 a class of current - I assume this is set in your js to push the button on. And leave the css as it is.
If it is too much hassle programmatically to do this in your code then just add a bit of js to add the class at page load.
homerslmpsonAuthor Commented:
Sadly the stuff you mentioned above is a bit over my head.
I would have thought there is a way to state:
"on page load, click branch0 button"
That's pretty much all I would need.  Then when another button is clicked, branch0 would deactivate.
Do you know of a simple way to do this either in js or html?
GaryCommented:
Add this just before your closing BODY tag

<script>
elem = document.getElementById("branch0");
elem.className = elem.className + " current";
</script>

Make sure your css is back to the original format.
homerslmpsonAuthor Commented:
That had the same outcome as the others.
The button is selected but won't deselect when another button is pressed.
GaryCommented:
Can you attach your html, css etc or  link to a testing page.
homerslmpsonAuthor Commented:
Sure. It's going to be a mess though. Give me a minute.
GaryCommented:
Just the rendered HTML - be quicker to save the page from your browser selecting Complete and then zip it and attach it here.
homerslmpsonAuthor Commented:
Please see attached.
I verified all needed files are included in order to render this one page properly.
The last piece of code you gave me is already included so you will see "branch0" already selected - it just won't deselect.
Webpage.zip
GaryCommented:
Ok, makes more sense now

Replace
#branch_buttons #branch0:active{background-position:left -195px;}
#branch_buttons #branch1:active{background-position:left -261px;}
#branch_buttons #branch2:active{background-position:left -326px;}

with
#branch_buttons #branch0.current{background-position:left -195px;}
#branch_buttons #branch1.current{background-position:left -261px;}
#branch_buttons #branch2.current{background-position:left -326px;}

Replace the script I gave above with this
<script>
$(function() {
$("#branch0").addClass("current")
$("#branch_buttons a").click(function(){
      $("#branch_buttons a").removeClass("current")
      $(this).addClass("current")
})
})
</script>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GaryCommented:
Forgot something

Replace
#branch_buttons #branch0:hover,#branch_buttons #branch0:focus, #branch_buttons #branch0.current{width:300px; height:65px; background-position:-301px top;}
#branch_buttons #branch1:hover,#branch_buttons #branch1:focus, #branch_buttons #branch1.current{width:300px; height:65px; background-position:-301px -66px;}
#branch_buttons #branch2:hover,#branch_buttons #branch2:focus, #branch_buttons #branch2.current{width:300px; height:65px; background-position:-301px -131px;}


with
#branch_buttons #branch0:hover,#branch_buttons #branch0:focus{width:300px; height:65px; background-position:-301px top;}
#branch_buttons #branch1:hover,#branch_buttons #branch1:focus{width:300px; height:65px; background-position:-301px -66px;}
#branch_buttons #branch2:hover,#branch_buttons #branch2:focus{width:300px; height:65px; background-position:-301px -131px;}
homerslmpsonAuthor Commented:
OK well you took care of the issue.
I am very grateful for your help.
For whatever reason the "hover" image and the "active" image were swapped after adding the updated code but I just went ahead and edited the sprite sheet as that is easier than trying to decipher all of this nonsense.
Thanks again!!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.