写真集Ver2です。
これは写真に対するコメントも表示できます。
「前へ」を押すと1ページ前に、「次へ」を押すと1ページ次に進みます。
「トップ」を押すと、一番最初のページに戻ります。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
pic=new Array(); moji=new Array();
//表紙になる1番目の画像を指定する
pic[0]="syasinnsyuu.gif";
//表紙になる1番目の文字を指定する
moji[0]="いろんな色です。";
//2番目の画像を指定する
pic[1]="0.gif";
//2番目の文字を指定する
moji[1]="ピンクです。";
//3番目の画像を指定する
pic[2]="1.gif";
//3番目の文字を指定する
moji[2]="濃いピンクです。";
//4番目の画像を指定する
pic[3]="2.gif";
//4番目の文字を指定する
moji[3]="ベージュです。";
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; }
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="document.form1.text1.value=moji[0];img_load();">
<table bgcolor="#f2e1ca" cellpadding="3" border="1" align="center">
<tr><th>
<img src="syasinnsyuu.gif" name="mypic" width="350" height="216" border="0">
</th></tr>
<tr><td align="center">
<form name="form1">
<textarea name="text1" cols="40" 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行目〜13行目が、画像及び文章を埋め込む場所です。
pic[0]="syasinnsyuu.gif";
moji[0]="いろんな色です。";
の2行で1ページ分のデータが構成されています。
上の行に表示したい画像、下の行に表示したい文字を記述します。
一番最初の行には、タイトル画像を指定しておくのが良いです。
サンプルでは全部で4ページ有りますので、上の2行と同じ様な行が4組有ります。
もし実際に使用される写真集が、4ページ未満ならば、不要な行を削除して下さい。
ただし、この時必ず下から削除します。
例えば使用したい写真集が3ページならば、ソース上から12、13行目の
pic[3]="2.gif";
moji[3]="ベージュです。";
を削除します。
同じ要領で、余計な行を削除して下さい。
ページ数がもっと多い場合は、減らすのではなく2行を増やしてあげます。
pic[3]="2.gif";
moji[3]="ベージュです。";
をコピーペーストして、その真下に付け加えてください。
で、数字の「3」の部分を1つ繰り上げて「4」にします。
もっと増やすのなら、同じようにコピーペーストして数字部分をどんどん繰り上げて下さい。
また写真集のページに来た時に表示させたい表紙などは、そのままHTML内のimgタグ部分をご変更下さい。
下から12行目にある
<img src="syasinnsyuu.gif" name="mypic" width="350" height="216" border="0" alt="サンプル画像"><br>
に、最初の画像URLをお書き下さい。
また、サイズなども自由にご変更下さい。
（補足）
テキストエリア内の文字を改行させたい場合は、改行させたい箇所に「\n」を書いてください。
|
