ここでは、png(ピング)を使った表示方法を解説します。
JavaScriptを使ったCSSの切り替えのテクニックは結構有名ですので、おぼえておいても損はしないと思います。
ここでは「A List Apart」というサイト（英語）でフリーで配布されている「styleswitcher.js」というスクリプトを使用します。
一番下の近くに”Download styleswitcher.js”という項目があるので、それをクリックしてダウンロードしてください。
CSS切り替え作成の流れ
1.代替CSSを用意する
まずは、デフォルトで使用しているCSSに変更したいものを上書きする。デフォルトのCSSをコピーした場合には不必要なものは全て削除しておきましょう。
2.CSSとstyleswitcher.jsをリンクさせる
head要素内に代替CSSと「styleswitcher.js」の読み込みを行うlink要素を追加する。
今回はデフォルトCSSを「default.css」に、代替CSSを「style1.css」というファイル名にしてあります。
HTML
[html]
<head>
<link rel="alternate stylesheet" type="text/css" href="default.css" />
<link rel="alternate stylesheet" type="text/css" href="style1.css" title="alternate1" />
<script type="text/javascript" src="styleswitcher.js">
</head>
[/html]
※代替用のスタイルシートは、linkタグのrel属性を、”stylesheet”ではなく”alternate stylesheet“としてください。
※title属性に注意してください。これが、JavaScriptの動作するポイントになるので、title属性に適当な値を入れておきましょう。
3.ファンクションを記述する
本文中の適切な箇所に下記のようにファンクションを記述する。
(X)HTML部分
[html]
<a href="#" onclick="setActiveStyleSheet(”); return false;">基本スタイル</a>
<a href="#" onclick="setActiveStyleSheet(‘alternate1’); return false;">代替スタイルその1に変更</a>
[/html]
クリックされると、linkタグのtitle属性の値が同じスタイルシートが適用されるようになります。
また、このスクリプトはクッキー機能がついていて、複数のページで同じスタイルシートを使っていると、読み込んだスタイルシートが反映されたままページ移動ができます。かなり便利なスクリプトだなぁと感動です。