 
【クリック募金】
【ウィルス対策】
【HTMLタグ】
【PCトラブル】
【ランキング】
【P R】
 
 
 
 
 
|
ジャバスクリプト
タグの簡易テスト（別窓）
| ランダムメッセージ
| ステータスバー
| アラート
| 背景色選択
| 画像の変化
| カウントダウン
|
| 小窓 | リモコン
| お気に入りに追加
| パスワードでリンク
| リンク制限
|
|
背景の変化
| 背景色選択 | 背景色選択（フレーム） |
■背景色選択
サンプル
素材屋さんなどでよく見かける、色のサンプルから背景色を選べるジャバスクリプトです。
spacer.gif という1×1ピクセルの透明な画像をダミーとして使います。
ここ→ ←にあるので、ホームページのフォルダの中などに保存してください。
☆Windows／右クリック→「名前を付けて画像を保存」
☆Macintosh／マウスボタンを長く押す(または、controlキー＋クリック)→「画像をディスクにダウンロード」
<html>
<head>
<title> </title>
☆スクリプト１をこの部分に記述します☆
</head>
<body>
☆「色のサンプル部分」はこの間の表示させたい部分に記述します☆
</body>
</html>
| スクリプト１ |
<script language="javascript">
<!--
function bgchange(colorCode){
document.bgColor=colorCode;
}
//-->
</script> |
| 色のサンプル部分 |
<table border="0" cellspacing="3" cellpadding="0">
<tr>
<td bgcolor="表示させたい色１"><a href="#"
onClick='javascript:bgchange("表示させたい色１");return false'><img
src="spacer.gif" border="0" width="20"
height="20"></a>
</td>
<td bgcolor="表示させたい色２"><a href="#"
onClick='javascript:bgchange("表示させたい色２");return false'><img
src="spacer.gif" border="0" width="20"
height="20"></a>
</td>
</tr>
</table> |
<td bgcolor="表示させたい色">〜</td>はいくつでも増やすことができます。
それぞれの「表示させたい色」は同じものを指定してくださいね。
サンプルページもご覧ください。
■背景色選択（フレーム）
サンプル
上記背景色選択のフレームヴァージョンです。
spacer.gif という1×1ピクセルの透明な画像をダミーとして使います。
ここ→←にあるので、ホームページのフォルダの中などに保存してください。
☆Windows／右クリック→「名前を付けて画像を保存」
☆Macintosh／マウスボタンを長く押す(または、controlキー＋クリック)→「画像をディスクにダウンロード」
<html>
<head>
<title> </title>
☆スクリプト２をこの部分に記述します☆
</head>
<body>
☆「色のサンプル部分」はこの間の表示させたい部分に記述します☆
</body>
</html>
| スクリプト２ |
<script language="JavaScript">
<!--
function bgchange(colorCode){
parent.色変更したいフレーム名.document.body.bgColor=colorCode;
}
//-->
</script>
※変更したいフレーム名が「mainFrame」だった場合
<script language="JavaScript">
<!--
function bgchange(colorCode){
parent.mainFrame.document.body.bgColor=colorCode;
}
//-->
</script> |
| 色のサンプル部分 |
<table border="0" cellspacing="3"
cellpadding="0">
<tr>
<td bgcolor="表示させたい色１"><a href="#"
onClick='javascript:bgchange("表示させたい色１");return
false'><img src="spacer.gif" border="0"
width="20" height="20"></a>
</td>
<td bgcolor="表示させたい色２"><a href="#"
onClick='javascript:bgchange("表示させたい色２");return
false'><img src="spacer.gif" border="0"
width="20" height="20"></a>
</td>
</tr>
</table> |
<td bgcolor="表示させたい色">〜</td>はいくつでも増やすことができます。
それぞれの「表示させたい色」は同じものを指定してくださいね。
サンプルページもご覧ください。 |
|
このページのトップへ
|
ホームページのデザインテンプレートをダウンロードできるサイト
