qpoonさん)が作成したものを二次加工したものです。【「サイズ可変スライド」の設置法】
1.この「サイズ可変スライド」スクリプトは、宮本幸雄氏(qpoonさん)が作成したものを二次加工したものです。
2.スクリプト「本文」
<html>
<head>
<META http-equiv="Content-Script-Type" content="text/javascript">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<title>魅惑のスイス一人旅・サイズ可変スライショード</title>
<script language="javascript">
<!--
fil=new Array();
url="./";//写真のあるＵＲＬ又はフォルダ
//写真ファイル名とコメントを「,（コンマ）」で区切って書く
n=0;
n++;fil[n]="Switzerland01.jpg,クライネシャイデック";
n++;fil[n]="Switzerland02.jpg,ヨッホーへの登山電車、クライネシャィデックより";
n++;fil[n]="Switzerland03.jpg,アイガー北壁、クライネシャィデックより";
n++;fil[n]="Switzerland04.jpg,アイガー望遠";
n++;fil[n]="Switzerland05.jpg,グローゼ・シャイデック、フリストより";
n++;fil[n]="Switzerland06.jpg,フリストからの下り道より";
n++;fil[n]="Switzerland07.jpg,フリストからの下り道より";
n++;fil[n]="Switzerland08.jpg,フリストからの下り道より";
n++;fil[n]="Switzerland09.jpg,クローゼシャイデックからフリストへの道より";
n++;fil[n]="Switzerland10.jpg,マッターホルーン、フィンデルンから";
n++;fil[n]="Switzerland11.jpg,マッターホルーン、ウンターロートホルンにて";
n++;fil[n]="Switzerland12.jpg,グリンデルワルド、フィリストにて";
n++;fil[n]="Switzerland13.jpg,プリスト望遠、クローゼシャイデックより";
n++;fil[n]="Switzerland14.jpg,グリンデルワルドの街望遠";
n++;fil[n]="Switzerland15.jpg,グリンデルワルドの民家";
n++;fil[n]="Switzerland16.jpg,エッシネン湖への道";
//最初に表示する写真の大きさを設定してください。
img_h=300; //タテ長さ（ピクセル）
img_w=400; //ヨコ長さ（ピクセル）
maisu=8;//サムネールの一行の枚数
kankaku=6000;//スライド間隔(ミリ秒)
//-->
</script>
</head>
<body bgcolor=#cceedd onLoad="focus();chg()">
<center>
<font size=6>サイズ可変スライショー</font><br>
お好みのサイズにしてご覧ください。
<script language="javascript" src="zoom.js">
</script>
</center>
</body>
</html>
3.「別ファイル」スクリプト
ritu=1; //表示倍率
c=0;
auto_flg=0;
//自動差し替え
function chg(){
auto_flg=1;
c++;if(c>n){c=1;}
dd=fil[c].split(",");
document["img"+c].src=url+dd[0];
document.hana.src=url+dd[0];
document.button_form.namae.value=dd[1];
img_tim=setTimeout("chg()",kankaku);
}
//自動／手動切替
function auto(){
if(auto_flg==1){
document.button_form.at.value="自動";
auto_flg=0;
clearTimeout(img_tim)
}else{
document.button_form.at.value="停止";
chg();
}
}
//駒送り
function mov(m){
if(auto_flg==1){
document.button_form.at.value="自動";
auto_flg=0;
clearTimeout(img_tim)
}
c=c+m;
if(c>n){c=1;}
if(c<1){c=n;}
dd=fil[c].split(",");
document.hana.src=url+dd[0];
document.button_form.namae.value=dd[1];
}
//拡大、縮小
function img_size(s){
ss=s;
ritu=ritu*ss;
document.hana.width=img_w*ritu;
document.hana.height=img_h*ritu;
size_tim=setTimeout("img_size(ss)",100);
}
//原寸復帰
function img_size1(){
ritu=1;
document.hana.width=img_w*ritu;
document.hana.height=img_h*ritu;
}
//自動停止
function img_stop(){
clearTimeout(size_tim);
}
//サムネルから呼出
function img_no(m){
c=m;
dd=fil[c].split(",");
document.hana.src=url+dd[0];
document.button_form.namae.value=dd[1];
}
//初期セット
document.write('<form name="button_form">');
document.write('<input type="button" value="縮小" onMouseOver="img_size(0.95)" onMouseOut="img_stop()">');
document.write('<input type="button" value="原寸" onClick="img_size1()">');
document.write('<input type="button" value="拡大" onMouseOver="img_size(1.05)" onMouseOut="img_stop()">');
document.write('__');
document.write('<input type="button" value="｜＜" onClick="mov(-1)">');
document.write('<input type="button" value="停止" name="at" onClick="auto()">');
document.write('<input type="button" value="＞｜" onClick="mov(+1)">');
document.write('<br><br>');
//額入りの写真
dd=fil[1].split(",");
document.write('<table border=7><tr><td><table border=2><tr><td>');
document.write('<img src="',url+dd[0],'" name="hana" galleryimg="no" height=',img_h,' width=',img_w,'>');
document.write('</td></tr></table></td></tr></table><br>');
//名前表示窓
document.write('<input type="text" name="namae" value="',dd[1],'" size=40 ');
document.write('style="border-width:0;font-size:24;background-color:transparent;text-align:center;color:',document.fgColor,'">');
document.write('<br>');
//サムネル
document.write('<table border=0><tr><td><br>');
for(i=1;i<=n;i++){
if(document.layers){
document.write('<a href="javascript:img_no(',i,')"><img src="null.gif" name="img',i,'" width=',img_w/8,' height=',img_h/8,' border=0></a>.');
}else{
document.write('<span onClick="img_no(',i,')"><img src="null.gif" name="img',i,'" width=',img_w/8,' height=',img_h/8,' border=0></span>.');
}
if(i%maisu==0){document.write('<br>');}
}
document.write('<br>');
document.write('</form>');
document.write('</td></tr></table>');
4.設置法
4-1.「2.スクリプト「本文」」を全て選択し、コピーします。
4-2.「ホームページ作成ソフト」の新規ページのソースを開き、「ホームページ作成ソフト」固有の<html>〜</html>
を削除します。
なお、「エディタ」または「メモ帳」を使う方法もありますが、ここでは「ホームページ作成ソフト」で説明します。
4-3.「4-1」でコピーしたスクリプト本文を「4-2」で削除したところに「貼り付け」ます。
4-4.貼り付けたスクリプト「本文」をあなた風に書き直します。
4-4-1.5行目のタイトル・・・・・(行の番号がふってありませんので、上から数えてください。・・・空白行も数えています。)
<title>魅惑のスイス一人旅・サイズ可変スライショード</title>
↑
この部分を書き直す。
4-4-2.12行〜27行目
n++;fil[n]="Switzerland01.jpg,クライネシャイデック";
↑ ↑
画像のファイル名と画像の名前または説明を書き直す。
4-4-3.30〜31行目
img_h=450; //タテ長さ（ピクセル）
img_w=600; //ヨコ長さ（ピクセル）
↑
画像の縦・横寸法を書き直します。(寸法は自由ですが、全て同寸法にして下さい。)
4-4-4.33行目
maisu=8;//サムネールの一行の枚数
↑
本体画像の下のサムネイル(縮小画像)の一行の枚数を書き直します。(仮に14枚の画像ですと「8」とすると一行目
8枚、二行目6枚になります。)
4-4-5.34行目
kankaku=6000;//スライド間隔(ミリ秒)
↑
スライドをめくる秒数です。数字が小さくなるほど速くなります。
4-4-6.42行目
<script language="javascript" src="zoom.js">
↑
別ファイルです。ファイル名は任意ですが、今回はこのままにしておきましょう。
4-4-7.スクリプトの書き直しが終わりましたら、「名前を付けて保存」して下さい。
なお、これだけでは「プレビュー」しても「zoom.js」がファイル名だけですので画像は表示されません。
4-5.「3.「別ファイル」スクリプト」を全て選択し、コピーします。
4-6.「エディタ」または「メモ帳」を開いて、「4-5」でコピーした「別ファイル」スクリプトを「貼り付け」ます。
4-7.今回はスクリプトの書き直しをせず、このまま「名前を付けて保存」してください。(ファイル名は任意ですが、今回は「zoom.js」としてお
・・・・きます。)
保存先は「スクリプト本文」が保存されたフォルダです。また、保存する時の「拡張子」は「js」(
)となります。
4-8.蛇足ですが、使用する「画像」も「スクリプト本文」が保存されたフォルダに保存してください。
5.その他
BGM、ICONなどは「本文スクリプト」外にあなた風に挿入・貼り付けをして下さい。