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

■ JavaScript - サンプル集(257種類) - フォーム
   - 写真集Ver2(コメント付き)

写真集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」を書いてください。


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

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