|
What does a styleswitcher do, you ask? Well it allows you to instantly switch between different style sheets on your webpage. If you enjoy creating style sheets or would like to allow your guests to choose whichever style that they prefer, then you should definitely add a styleswitcher to your site. .: Javascript styleswitcher :. Requirements: Since this styleswitcher uses Javascript, you will not have to worry about a lot of editing or whether or not your host supports a certain type of scripting. But of course, even if it is functionable in all browsers, it relies on Javascript and cookies; your visitor will have both of those things enabled (well, I'm pretty sure everyone has those things enabled). And for those who are using heavily image-based layouts, just note that when you visit your site, it may load the default style sheet first and then will eventually load the one that you have selected the last time you were in your site. It's not a big deal, but it could cause a lot of lagging for slow computers. First things first, you will need to download this file: (styleswitcher.js) You will not have to edit anything in the .JS file, just upload it into your server and leave it alone. Now, go to your HTML document and insert the two link elements below in the <head> area. <script type="text/javascript" src="styleswitcher.js"></script> <link rel="stylesheet" type="text/css" href="style1.css" title="style1"> The first code will link the styleswitcher.js to your pages, and the second one will link to your style sheets. Be sure to have one for your default style, and you can add as many of the second link element to your HTML - depending on how many style sheets you have. We're not done yet, now you will need to make it so that the visitor can change the style sheet once they click on a specified link. Add the code below to where you want the styleswitcher links to appear: <a href="#" onclick="setActiveStyleSheet('style1'); return false;">change style to style1</a> <a href="#" onclick="setActiveStyleSheet('style2'); return false;">change style to style2</a> ...and that's it! You have your very own Javascript styleswitcher! ^-^ Keep in mind that the same Javascript link elements should be included in EVERY page, else the styleswitcher is virtually useless. |
