WEST MiRa JavaScript：サンプル集(257種類) - 画像 - 壁紙をチョイスする（全６パターン）

[ JavaScriptの目次 ]

▲トップページ
▲基礎知識
▲基本操作
▲その他
▲サンプル集(257種類)
▲その他

[ 他の一覧 ]

◆↑ホームへ

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

化粧品Q&A

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

・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」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を３つ用意します。これはフレームを利用している為です。
ここはJavaScriptのコーナーですので、フレームについての説明は省きます。

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

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

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

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

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

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

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

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

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

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

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

美白コスメ

　 WEST MiRa > JavaScript > サンプル集(257種類) > 画像 > 壁紙をチョイスする（全６パターン） >

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