リンクで選択するスライドショー（コメント付き）の JavaScript
 戻　る


北アルプス紀行

毎年恒例のように冬山にでかけますが、今年は北アルプスに出かけ、 その時の白銀の風景を紹介します。

　（１） ビッグバーン
　（２） 笠　岳
　（３） 西穂高岳
　（４） 西穂山荘
　（５） 焼　岳

　写真の説明



スライドショーの特徴
・ 普通のリンクで選択して、画像を切り替えるスライドショーです。
・ 画像に対応したコメントが表示できます。
・ 普通にリンクするだけなので、タグで自由にレイアウト・デザインを書きかえれます。
・ 数値の設定だけで、画像表示が調整出来ます。
設定方法
まず、「ソースファイル」を、指示に従いコピーアンドペーストします。

（１）「表示をデザインする」の部分で、色に合わせて、次の設定をします。

 ■ 「フリーエリア」部分は、リンク部分を盛り込んで自由に作ってください。
 ■ 普通のリンクと違う、この色の部分は、この通り書いてください。
 ■ 画像のスライド順にリンクの、この色の部分は、0 から順に記入してください。
 ■ スライドショー本体の、額縁の種類、額縁の太さ、額縁の色を、好みで変えてください。
    ※ 本項目の設定内容は、リンク先参照
 ■ コメント窓の、額縁の種類、額縁の太さを、好みで変えてください。
    ※ 本項目の設定内容は、リンク先参照
 ■ コメント文の、文字の大きさ、背景色を、好みに合わせて指定を変更してください。
 ■ その他の設定がわかる方は、好みに合わせて指定を変更してください。
 ■ 本例は「回り込み」を利用してますが、タグの解る方は解体して、自由に配置してください。

<!-- ************ 表示をデザインする ****************** -->
<!-- スライド本体 -->
 <div id="slide" style="border:ridge 15 #d8ffc0; margin:0 0 0 7; float:right"></div>
<!-- フリーエリア -->

<br>
<center><font size=4 color=brown><b>北アルプス紀行</b></font></center>
<br>
毎年恒例のように冬山にでかけますが、今年は北アルプスに出かけ、
その時の白銀の風景を紹介します。<br><br>
 　（１） <a href="javascript:changeImage(0)">ビッグバーン</a><br>
 　（２） <a href="javascript:changeImage(1)">笠　岳</a><br>
 　（３） <a href="javascript:changeImage(2)">西穂高岳</a><br>
 　（４） <a href="javascript:changeImage(3)">西穂山荘</a><br>
 　（５） <a href="javascript:changeImage(4)">焼　岳</a><br><br>
<!-- コメント -->
　<font color=brown>写真の説明</font>
  <div id="mytext" style="border:dashed 1; font-size:11pt; padding:3;
    width:100%; height:55; overflow-y:scroll; background-color:#ffffff"></div>
<br style="clear:both">
<!-- ****************** ここまで ********************** -->


（２）「入力事項」の部分で、色に合わせて、次の設定をします。 太字は入力可能場所。

 ■ 「0」から順にスライドする画像を、アドレスを含むファイル名で指定します。
 ■ 画像に対応した、コメント文を画像ファイルの右側に記入します。
 ■ 画面の表示幅は必ず入力してください。
 ■ 画面の高さの指定が「0」の場合、１枚目の画像の縦横比で決定されます。
 ■ その他、必要に応じて、指示に従い設定してください。

// ***************************  入力事項  *****************************
// ======= 入力１：スライド画像の設定 =======
// 出したい画像の種類を必要数だけ入力（0から順に）
// 右側はは、その写真のコメントを入れてください
// 注意！！　画像（写真）の縦と横の比は一定に加工しておいて下さい
ugoku[ 0 ]=new Array("../parts/sinho0.jpg", "新穂高スキー場で一番のハード斜面");
ugoku[ 1 ]=new Array("../parts/sinho1.jpg", "県境をのぞき、岐阜県の最高峰");
ugoku[ 2 ]=new Array("../parts/sinho2.jpg", "山容の美しさで人気");
ugoku[ 3 ]=new Array("../parts/sinho3.jpg", "北アルプス登山の拠点となる山荘");
ugoku[ 4 ]=new Array("../parts/sinho4.jpg", "この山の爆発で上高地の梓川を堰き止め、
大正池が出来た");
// ======= 入力２：その他の設定 =======
var haba = 360 ;      // 表示する画像幅      （ピクセル）（初期値 400）
var taka = 0;         // 表示する高さ（ピクセル） 0ならば自動設定
// *********************** 入力事項ここまで ***************************
更新履歴
・05/06/21　ver 0.20　コメントが表示されないバグを修正
・05/06/10　ver 0.10　原画像の縦横比を読みとるように更新
・03/11/03　ver 0.00　初　公　開
ソースファイル
・ まず、スライドショーを設置したい場所に、次の部分をコピーアンドペーストして下さい。
<!-- ************ 表示をデザインする ****************** -->
<!-- スライド本体 -->
 <div id="slide" style="border:ridge 15 #d8ffc0; margin:0 0 0 7; float:right"></div>
<!-- フリーエリア -->
<br>
<center><font size=4 color=brown><b>北アルプス紀行</b></font></center>
<br>
毎年恒例のように冬山にでかけますが、今年は北アルプスに出かけ、
その時の白銀の風景を紹介します。<br><br>
 　（１） <a href="javascript:changeImage(0)">ビッグバーン</a><br>
 　（２） <a href="javascript:changeImage(1)">笠　岳</a><br>
 　（３） <a href="javascript:changeImage(2)">西穂高岳</a><br>
 　（４） <a href="javascript:changeImage(3)">西穂山荘</a><br>
 　（５） <a href="javascript:changeImage(4)">焼　岳</a><br><br>
<!-- コメント -->
　<font color=brown>写真の説明</font>
  <div id="mytext" style="border:dashed 1; font-size:11pt; padding:3;
    width:100%; height:55; overflow-y:scroll; background-color:#ffffff"></div>
<br style="clear:both">
<!-- ****************** ここまで ********************** -->

・ 次に、<body>〜</body>の間の任意の場所に、下記の部分をコピーアンドペーストして下さい。
<script type="text/javascript">
<!--//_slide_swit03_cm ver0.20  （ぱーぷりんの溜まり場）
ugoku=new Array(); // この行は触らないで・・

// ***************************  入力事項  *****************************
// ======= 入力１：スライド画像の設定 =======
// 出したい画像の種類を必要数だけ入力（0から順に）
// 右側はは、その写真のコメントを入れてください
// 注意！！　画像（写真）の縦と横の比は一定に加工しておいて下さい
ugoku[ 0 ]=new Array("../parts/sinho0.jpg", "新穂高スキー場で一番のハード斜面");
ugoku[ 1 ]=new Array("../parts/sinho1.jpg", "県境をのぞき、岐阜県の最高峰");
ugoku[ 2 ]=new Array("../parts/sinho2.jpg", "山容の美しさで人気");
ugoku[ 3 ]=new Array("../parts/sinho3.jpg", "北アルプス登山の拠点となる山荘");
ugoku[ 4 ]=new Array("../parts/sinho4.jpg", "この山の爆発で上高地の梓川を堰き止め、大正池が出来た");
// ======= 入力２：その他の設定 =======
var haba = 360 ;    // 表示する画像幅      （ピクセル）（初期値 400）
var taka=0;         // 表示する高さ（ピクセル） 0ならば自動設定
// *********************** 入力事項ここまで ***************************

 var mai=ugoku.length-1;    // 写真の全枚数
 var n=0;

// 画像の設定
 first_img = new Image(); first_img.src = ugoku[0][0];
 slide.innerHTML="<img name='imgs' src='"+ugoku[0][0]+"'>";
  w_img=document.imgs.width; h_img=document.imgs.height;
 imgs.style.width = haba;
  if (taka==0){ taka = haba*h_img/w_img }
 slide.style.height=taka;
 slide.style.backgroundColor="#ffffff";
 slide.style.overflow="hidden";


// コメントの設定
 mytext.innerHTML=ugoku[0][1];

// ----- 関　数 -----
function changeImage(num){
 mytext.innerHTML=ugoku[num][1];
 document.imgs.src=ugoku[num][0]; }

// end -->
</script>