WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)
jbZ

■ JavaScript - サンプル集(257種類) - 画像
   - 壁紙をチョイスする(全6パターン)

ボタンを選ぶと壁紙が切り替わっていくスクリプトです。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。)
ソースを見る
解説を見る





[ ソース ]

<script language="JavaScript">
<!--
function kabegami(syurui)
{parent.myframe2.document.open();
parent.myframe2.document.write('<html><head></head>');
parent.myframe2.document.write('<body background="',syurui,'">');
parent.myframe2.document.write('</body></html>');
parent.myframe2.document.close();
//-->
</script>


[ 解説 ]

まず最初に、HTMLを3つ用意します。 これはフレームを利用している為です。
ここはJavaScriptのコーナーですので、フレームについての説明は省きます。

フレームに使用するHTMLファイルを「文書1」、
選択画面があり、JavaScriptを埋め込むHTMLファイルを「文書2」、
実際に壁紙が変わるHTMLファイルを「文書3」と呼びます。

文書1でフレームを上下に割ります。その際、フレームの名前を必ずつけて下さい。
上のフレーム名は何でもいいのですが、二つ目のフレーム(実際に壁紙が変わる場所)の名前は、「myframe2.html」にして下さい。

上のフレームを狭く、下のフレームを広く、または上を広く、下を狭くでもOKです。
上下を半々で割ってもいいのですが、壁紙を見せる為のスクリプトなので壁紙が変わる場所が広い方が良いでしょう。

次に、文書1のヘッダ(<head>と、</head>の間)内に以下のソースを書いて下さい。

次にボディ内に壁紙のサムネイル(小さい見本)と、 ラジオボタンを設置します。
この時、テーブルを使用して配置を整えると見やすいです。
ここではとりあえず、テーブルはなしで説明を続けます。

<img src="../kabe/kabe1.gif" width="50" height="50">
<input type="radio" name="ver1" onClick="kabegami('kabe1.gif');">壁紙1

上の画像表示タグについての説明も省きます。
で、下の<input…で始まっている文で、ボタンの設置をしています。

ですから画像の数と同じだけ、<input…も書いて下さい。
文の後方にある「kabe1.gif」が画像のURLです。そこはお使いの画像が ある場所のURLを入れて下さい。
「壁紙1」と書かれている場所にも、お好きな名前をどうぞ。

サンプル画像の数をたくさん書いても大丈夫です。
フレーム内で表示しきれなくなった場合は、スクロールバーが出てきますから。

ホームへ戻るリンクなどもここに書いておきましょう。

最後に「文書3」ですが何も書いて無くてOKです。
とりあえず<html><body></body></html>とでも書いておきましょう。
好きな事を書いても大丈夫です。


バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.