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.
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.
There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.
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.
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?
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
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>
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!!
0
Question has a verified solution.
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Open in new window