ブラウザ上で読める絵本です。
「まえへ」を押すと1ページ前に、「つぎへ」を押すと1ページ次に進みます。
「はじめから」を押すと、一番最初のページに戻ります。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html><head>
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
pic=new Array(); moji=new Array();
pic[0] ="title.jpg";
moji[0]="";
pic[1] ="title.jpg";
moji[1]="明日は家族みんなで、遊園地に行くんだ。";
pic[2] ="home_kumori.gif";
moji[2]="窓から外を見ると、真っ暗だ。";
pic[3] ="home_kaze.gif";
moji[3]="ぼんやり空を見上げてたら、窓が揺れだした。";
pic[4] ="home_kaze.gif";
moji[4]="そうだ！\nおばあちゃんに、もう一つ教えてもらった事があった。";
pic[5] ="teruteru.jpg";
moji[5]="これこれ！\nてるてる坊主を窓にぶら下げて・・・";
pic[6] ="home_ame.gif";
moji[6]="夜になると、風はもっと強くなってきた。";
pic[7] ="home.jpg";
moji[7]="目が覚めた時、すずめの鳴き声が聞こえた。";
pic[8] ="teruteru.jpg";
moji[8]="「てるてる坊主さん、ありがとう！」";
pic[9] ="teruteru2.jpg";
moji[9]="てるてる坊主さんをよく見ようとしたら、あっちの部屋で物音が聞こえた。";
pics=new Array();
for(i=0; i<pic.length; i++){pics[i]=new Image(); pics[i].src=pic[i];}
function img_load()
{
for(i=0; i<pic.length; i++)document.images["hidden"].src=pics[i].src;
}
kazu=0;
function pic_hyouji(dotti)
{if(kazu>-1 && kazu<pic.length)kazu+=dotti;
else if(kazu==-1 && dotti==1)kazu=1;
else if(kazu==pic.length && dotti==-1)kazu=pic.length-2;
if(dotti==0){
kazu=0; document.images["mypic"].src=pics[kazu].src;
document.form1.text1.value="";}
else if(dotti==-1 && kazu<0)alert("まえはないよ！");
else if(dotti==1 && kazu>pic.length-1)alert("おわり。");
else {document.images["mypic"].src=pics[kazu].src;
document.form1.text1.value=moji[kazu];}
}
//-->
</script>
</head>
<body onLoad="img_load();">
<table bgcolor="#ebc4a1" cellpadding="3" border="1" align="center">
<tr><th>
<img src="title.jpg" width="250" height="250" name="mypic">
<br>
</th></tr>
<tr><td align="center">
<form name="form1">
<textarea name="text1" cols="50" rows="6" wrap="soft"></textarea><br>
<input type="button" value=" ま え へ " onClick="pic_hyouji(-1);"> <input type="button" value="はじめから" onClick="pic_hyouji(0);"> <input type="button" value=" つ ぎ へ " onClick="pic_hyouji(1);">
<img src="" name="hidden" width="1" height="1" border="0">
</form>
</th></tr></table>
</body>
</html>
[ 解説 ]
まず絵本で使う画像と、文章を用意してください。
画像を作成する時に注意して頂きたいのは、全ての画像を同じサイズで作成する事です。
画像は、全て縦横の大きさを揃えてください。
次に用意した画像と文章を、スクリプトに埋め込んでいきます。
ソースの上から6行目〜25行目が、画像及び文章を埋め込む場所です。
pic[0] ="title.jpg";
moji[0]="";
の2行で1ページ分のデータが構成されています。
上の行に表示したい画像、下の行に表示したい文字を記述します。
一番最初の行には、タイトル画像を指定しておくのが良いです。
で、文字などは何も指定せずに空白にしておきます。
サンプルでは全部で10ページ有りますので、上の2行と同じ様な行が10組有ります。
もし実際に使用される絵本が、10ページ未満ならば、不要な行を削除して下さい。
ただし、この時必ず下から削除します。
例えば使用したい絵本が9ページならば、ソース上から24、25行目の
pic[9] ="teruteru2.jpg";
moji[9]="てるてる坊主さんをよく見ようとしたら、あっちの部屋で物音が聞こえた。";
を削除します。
同じ要領で、余計な行を削除して下さい。
ページ数がもっと多い場合は、減らすのではなく2行を増やしてあげます。
pic[9] ="teruteru2.jpg";
moji[9]="てるてる坊主さんをよく見ようとしたら、あっちの部屋で物音が聞こえた。";
をコピーペーストして、その真下に付け加えてください。
で、数字の「9」の部分を1つ繰り上げて「10」にします。
もっと増やすのなら、同じようにコピーペーストして数字部分をどんどん繰り上げて下さい。
（補足）
テキストエリア内の文字を改行させたい場合は、改行させたい箇所に「\n」を書いてください。
|
