DougOfTheAbaci
March 9th, 2007, 06:48 PM
To see an example of what I'm asking how to do view Apple OSX Downloads (http://www.apple.com/downloads/macosx/) page. See just after the featured download where they have three tabs? If you click on a tab it swaps out the list with a new one and changes the button's background image.
I've been trying to figure it out myself and as far as I can tell it's a combination of CSS and JavaScript. I'm guessing that they are setting a rule that when one of those list items, the buttons, has "active" concatenated onto the end of it's class they show certain content and hide other content. And they have a rule that's specific to each of the three. I've done something sort of like this where you swap out an image for text in a title by making a span on the inside and giving it an absolute X position of -9999px or something along those lines.
Where I lose it is how do they change it without actually having an anchor tag around it for a link and how do they actually change the class name?
What I would love is if someone could give me a quick stripped down example of it or point me to a tutorial, that would be fantastic!
Also, what's the browser compatibility for this? I know certain JS is safe for pretty much any of the main browsers (FireFox, Safari, IE 6, IE 7) and I've done something sort of like this where I used buttons to swap out images without refreshing the page.
Any help you guys can give me would be greatly appreciated!!!
I've been trying to figure it out myself and as far as I can tell it's a combination of CSS and JavaScript. I'm guessing that they are setting a rule that when one of those list items, the buttons, has "active" concatenated onto the end of it's class they show certain content and hide other content. And they have a rule that's specific to each of the three. I've done something sort of like this where you swap out an image for text in a title by making a span on the inside and giving it an absolute X position of -9999px or something along those lines.
Where I lose it is how do they change it without actually having an anchor tag around it for a link and how do they actually change the class name?
What I would love is if someone could give me a quick stripped down example of it or point me to a tutorial, that would be fantastic!
Also, what's the browser compatibility for this? I know certain JS is safe for pretty much any of the main browsers (FireFox, Safari, IE 6, IE 7) and I've done something sort of like this where I used buttons to swap out images without refreshing the page.
Any help you guys can give me would be greatly appreciated!!!