| 公開日 | 2002.9.18 | ||
| 最終更新日 | --- | ||
| バージョン | ver.1.0 | ||
| 動作確認 | IE6.0,NN4.7,NN7.0,Opera7.0 | ||
| cookie | 使用(NN4のみ) | ||
| CSS | 使用 | ||
| 更新履歴 | --- | ||
| スタイルチェンジャー ver.1.0 |
||||
◆サンプル スタイル１ スタイル２ 元に戻す |
||||
| ＜機能と特徴＞ ・適用する外部スタイルシートを選択できます。 |
||||
 |
|
|
|
|
 |
|
| 公開日 | 2002.9.18 | ||
| 最終更新日 | --- | ||
| バージョン | ver.1.0 | ||
| 動作確認 | IE6.0,NN4.7,NN7.0,Opera7.0 | ||
| cookie | 使用(NN4のみ) | ||
| CSS | 使用 | ||
| 更新履歴 | --- | ||
 |
|
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
||||
|
１．カスタマイズフォームを使って設定をしてください。 ２．ソース１を<head>〜</head>の間に書き込んでください。 ３．ソース２を<body>〜</body>の間の スタイルシートを切替えるリンクを表示したい位置に書き込んでください。 ４．ブラウザでテストしてみてください。 正常にスタイルシートが切り替われば設置は完了です。 |
||||||
|
|
|||||
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
|
|||
|
１．ソース１を<head>〜</head>の間に書き込んでください ２．//設定〜//ここまでの２行目を既定のスタイルシートのパスに変更してください。 s_css[0] = 'css/stylesheet.css';
３．//設定〜//ここまでの５行目を切り替わるスタイルシートのパスに変更してください。
s_css[1] = 'css/style1.css';
４．ソース２を<body>〜</body>の間の表示したい場所に書き込むか
各種イベントハンドラでstyle_chengers(1)関数を呼び出してください。５．ブラウザでテストしてみてください。 正常にスタイルシートが切り替われば設置は完了です。 |
||||||
|
|
|||||
 |
|
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
|
|
|
■特にありません。
|
||||||
|
|
|||||
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
||
|
■切り替わるスタイルシートを複数にする。 //設定〜//ここまでの５行目を１行増やし 該当個所の数字と外部スタイルシートのパスを変更してください。 s_css[2] = 'css/style2.css';次にソース２を１行増やし該当個所の数字を変更してください。
<a href="JavaScript:style_chengers(2);">スタイル２</a>
|
||||||
|
|
|||||
 |
 |
|
|
■ソース１(以下のソースを<head>〜</head>の間に書き込んでください) | |
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
//ver.1.0
s_css = new Array();
//設定
s_cookie = 's_style'; //クッキーの名前
s_css[0] = 'css/stylesheet.css'; //既定の外部スタイルシートのパス
s_css[1] = 'css/style1.css'; //1個目の切替える外部スタイルシート
//ここまで
function style_chengers(i)
{with(document)
{if(document.all)
{all("s_link").href = s_css[i];}
else if(document.getElementById)
{getElementById("s_link").href = s_css[i];}
else if(document.layers)
{s_date = new Date();
s_date.setTime(new Date().getTime()+15*1000);
cookie=s_cookie+"="+i+"; expires="+s_date.toGMTString()+";";
if(document.cookie.indexOf(s_cookie+"="+i) == -1)
{alert('スタイルを変更するにはcookieを有効にしてください。');
return;}
location.reload();}}}
i=0;
with(document)
{if(document.all || document.getElementById)
{s_id='id="s_link"';}
else if(document.layers)
{s_id="";
s_cookies = cookie
if(s_cookies.indexOf(s_cookie) != -1)
{while(s_cookies.indexOf(' ') != -1)
{s_cookies = s_cookies.replace(" ","");}
s_cookies = s_cookies.split(";");
for(a in s_cookies)
{s_style = s_cookies[a].split("=");
if(s_style[0] == s_cookie)
{i=s_style[1];}}}}
open();
write('<link rel="stylesheet" href="'+s_css[i]+'" type="text/css" '+s_id+'>');
close();}
// -->
</script>
|
■ソース２(以下のソースを<body>〜</body>の間に書き込んでください) | |
<!--スタイルを元に戻すリンク--> <a href="JavaScript:style_chengers(0);">元に戻す</a>
<!--1個目リンク--> <a href="JavaScript:style_chengers(1);">スタイル１</a>
 |
|