This page demonstrates CSS Style Switcher option.
Please click on the following color packages to view different background colors.
Background Colors: |
||
These are the steps to create this effect:
Add the following codes between your header tags.
<link href="styleA.css" rel="stylesheet" type="text/css" title="default" />Add the following codes between your body tags.
<link href="styleB.css" rel="stylesheet" type="text/css" title="alternate" />
<link href="styleC.css" rel="stylesheet" type="text/css" title="any" />
<script type="text/javascript" src="styleswitcher.js"></script>
<a href="#" onClick="setActiveStyleSheet('default'); return false;" class="button"> Default Color Package</a>Write "styleA.css" file with the following code line.
<a href="#" onClick="setActiveStyleSheet('alternate'); return false;" class="button"> Green Color Package</a>
<a href="#" onClick="setActiveStyleSheet('any'); return false;" class="button"> Pink Color Package</a>
body {background-color: #99CC99;}Make two copies of "styleA.css" and rename as "styleB.css" and "styleC.css"
body {background-color: #CCFF99;}Revise the following codes in "styleC.css" file.
body {background-color: #FFCCFF;}Then write a javascript file, to be continued...