[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
(1)
まずは
Alternative Style: Working With Alternate Style Sheetsから
JavaScriptスクリプト「styleswitcher.js」をダウンロードする。
※念のためここにもアップしときます。
この中で
「有効日数」とかの設定も出来るはず。
(2)
これをhead内で呼び出し。
スクリプトで利用するスタイルシートも呼び出し。
<head>内に
<link rel="stylesheet" type="text/css" href="style.css" title="standard">
<link rel="alternate stylesheet" type="text/css" href="style1.css" title="alternate1">
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="alternate2">
<script type="text/javascript" src="styleswitcher.js">
★フォルダに入れてる場合は「contents_css/」とか「js/」を忘れずに。
★変更するフォントのスタイルシートをrel=”alternate stylesheet”で
呼び出すことがポイント。
title=は処理を判断する時の名前というかんじ。
(3)
HTML内には下記のタグを記入
<a href="#" onclick="setActiveStyleSheet('alternate1'); return false;">小</a>
<a href="#" onclick="setActiveStyleSheet('standard'); return false;">中</a>
<a href="#" onclick="setActiveStyleSheet('alternate2'); return false;">大</a>
★style.css内で#contentsと指定しているので
<div id="contents">内がサイズ変更される。
つまりサイズ変更したいコンテンツをここに入れる。
divの名前がcontentsではない場合は、style.css内の#contentsも変更する。
(4)
cssファイルを3つ作成する。もちろんサイズ変更可能。
●style.cssには
#contents{font-size:100%;}
●style1.cssには
#contents{font-size:80%;}
●style2.cssには
#contents{font-size:120%;}
これで完成！！
画像にポインタを当てると別の画像に切り替わるJavaScript。
(1)
<head>～</head>タグ内に
<meta http-equiv="Content-Script-Type" content="text/javascript">
を追加する。
(2)
画像を貼り付ける。
<img src="top.jpg">
(3)
このタグに名前をつける。
<img name="over" src="top.jpg">
(4)
onMouseOverを使って
マウスを乗せた時の動作（マウスを乗せると画像が切り替わる）スクリプトを追加する。
<img name="over" src="top.jpg" onMouseOver="document.over.src='top_on.jpg';">
「ドキュメント内のoverってやつのsrcをこれに替えろ」みたいな。
(5)
必要ならマウスが「離れた時の動作」を
onMouseOutを使って追加する。
<img name="over" src="top.jpg" onMouseOver="document.over.src='top_on.jpg';"
onMouseOut="document.over.src='top.jpg';">
-------------------------
その他
onClick ・・・ クリックされた時。
onDblClick ・・・ ダブルクリックされた時。
onKeyPress ・・・ キーボードが押された時。
ul,liに対して
「float:left;」
を指定してあげることで
横並びになる。
「list-style-type: none;」も忘れずに。
--------------
cssを直接書き込む場合はこう↓
<ul style="list-style:none">
<li style="float:left">＜項目１＞</li>
<li style="float:left">＜項目２＞</li>
<li style="float:left">＜項目３＞</li>
</ul>
--------------
こんなことも出来ちゃう。
それぞれの文字を枠で囲んで
さらに隣との間隔を空ける。
float: left;
width: 8em;
margin-right: 5px;
padding: 2px;
border: 1px #ffb366 solid;
background-color: #fffdee;
text-align: center;
