簡易おみくじです。
これは、結果がテキストエリアに表示されます。
また、結果に適した画像も表示させます。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html><head>
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
my_bun=new Array();
my_pic=new Array();
my_bun[0]="大吉！絶好調です。何もかも貴方の思い通り！";
my_pic[0]="daikiti.gif";
my_bun[1]="中吉！何か良いことがありそう。";
my_pic[1]="tyuukiti.gif";
my_bun[2]="吉。穏やかな日々が過ごせそうです。";
my_pic[2]="kiti.gif";
my_bun[3]="小吉。今日はゆっくりと過ごしましょう。";
my_pic[3]="syoukiti.gif";
my_bun[4]="凶…忘れ物に注意！";
my_pic[4]="kyou.gif";
my_bun[5]="大凶…ミスを連発しそうです。";
my_pic[5]="daikyou.gif";
my_bun[6]="中吉。懐かしい人に出会えそう。";
my_pic[6]="tyuukiti.gif";
my_bun[7]="小吉。残り物には福がある。";
my_pic[7]="syoukiti.gif";
my_bun[8]="凶…こんな日は大人しくしていよう。";
my_pic[8]="kyou.gif";
my_bun[9]="吉。懐かしい人に連絡を取ってみよう。";
my_pic[9]="kiti.gif";
hajime="omikuji.gif";
pics=new Array();
for(i=0; i<my_pic.length; i++)
{
pics[i]=new Image();
pics[i].src=my_pic[i];
}
function img_load()
{
for(i=0; i<my_pic.length; i++)document.images["hidden"].src=pics[i].src;
document.images["hidden"].src=hajime;
}
function omikuji()
{a=Math.floor(Math.random()*10);
document.images["kuji_pic"].src=pics[a].src;
document.form1.text1.value=my_bun[a];
}
function my_reset()
{document.form1.text1.value="";
document.images["kuji_pic"].src=hajime;}
//-->
</script>
</head>
<body onLoad="img_load();">
<div align="center">
<img src="omikuji.gif" width="100" height="50" alt="おみくじ" name="kuji_pic">
<form name="form1">
<textarea name="text1" rows="5" cols="35" wrap="soft"></textarea><br>
<input type="button" value="御神籤" onClick="omikuji();">
<input type="button" value="RESET" onClick="my_reset();";>
<img src="" name="hidden" width="1" height="1" border="0">
</form>
</div>
・
・
・
</body></html>
[ 解説 ]
まずはおみくじの画像を、それぞれご用意下さい。
サイズは特に問いません。
お好きなサイズで、画像をお作り下さい。
ただし、全ての画像サイズ（横幅、高さ）は統一してください。
また、サンプルでは「大吉」「中吉」「吉」「小吉」「凶」「大凶」の6つの画像を使い回しています。
しかし、文章毎に全く異なる画像を使用する事も出来ます。
そして、初期状態で表示される画像も、一つご用意下さい。
（サンプルで、「御神籤」となっている画像の事です。）
次におみくじの内容と、画像URLを書き換えます。
上から7〜26行目に、おみくじの内容と、表示させたい画像URLのデータがあります。
まずは、お好きなように、おみくじの内容部分を書き換えて下さい。
次に画像URLを指定します。
各行の下の行が、そのおみくじ内容に対応した画像URLとなっています。
例えば1番上の大吉の画像URLを書き換えたいなら、8行目の
my_pic[0]="daikiti.gif";
を、書き換えます。
同じ要領で、全ての画像URLを書き換えて下さい。
次は、初期状態の画像URLを設定します。
上から28行目にある
hajime="omikuji.gif";
に、初期状態で使用する画像URLをお書き下さい。
最後は、HTMLのカスタマイズです。
下から11行目に、画像を表示させるタグがあります。
ここには、初期状態の画像URLを指定し、必要に応じて内容を書き換えて下さい。
また、下から8行目がおみくじボタンです。
「御神籤」と書いてある場所には、ボタンに表示させたいお好きな文字を書いて下さい。
結果が表示されるテキストエリアのサイズなども、ご自由にご変更下さい。
（補足）
テキストエリア内の文字を改行させたい場合は、改行させたい箇所に「\n」を書いてください。
|
