スイッチで切替えるスライドショーの(コメント付き)の JavaScript |
戻 る |
北アルプスの風景 コメント |
まず、「ソースファイル」を、指示に従いコピーアンドペーストします。 (1)「表示をデザインする」の部分で、色に合わせて、次の設定をします。 ■ スライドショー全体の左端からの空きを入れてください。 ■ タイトル名を入れてください。 ■ タイトル文字の文字の大きさと書体と色を、好みで変えてください。 ■ タイトル名に代わり <img src="画像ファイル"> で画像も使えます。 ■ スライドショー本体の、額縁の種類、額縁の太さ、額縁の色を、好みで変えてください。 ※ 本項目の設定内容は、リンク先参照 ■ コメントの、額縁の種類、額縁の太さ、額縁の色を、好みで変えてください。 ※ 本項目の設定内容は、リンク先参照 ■ コメントの、文字の大きさ、書体、背景色を、好みで変えてください。 ■ その他の設定がわかる方は、好みに合わせて指定を変更してください。 ■ タグの解る方は、テーブルを解体して、任意にレイアウトしてください。 <!-- ******************** 表示をデザインする ********************** --> <table style="margin-left:100"><tr><td align="center"> <!-- タイトル --> <span style="font:bold 15pt MS ゴシック; color:#000000">北アルプスの風景</span><br> <!-- スライド本体 --> <span id="slide" style="border:solid 15 #000000; margin:5 0"></span><br> <!-- コメント --> <span id="comm" style="border:inset 1.5 #a0a080; font:11pt MS ゴシック; margin:5 0; padding:5; background-color:#ffffff">コメント</span><br> <!-- スイッチ --> <span id="swit"></span> </td></tr></table> <!-- ************************* ここまで *************************** --> (2)「入力事項」の部分で、色に合わせて、次の設定をします。 太字は入力可能場所。 ■ 「0」から順にスライドする画像を、アドレスを含むファイル名で指定します。 ■ 画像に対応したコメントを、画像ファイルの右側に記入します。 ■ 画面の表示幅は必ず入力してください。 ■ 画面の高さの指定が「0」の場合、1枚目の画像の縦横比で決定されます。 ■ 開始スイッチの画像が「0」ならば、停止スイッチの画像の指定は無効です。 ■ その他、必要に応じて、指示に従い設定してください。 // *************************** 入力事項 ***************************** // ======= 入力1:スライド画像の設定 ======= // 出したい画像の種類を必要数だけ入力(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", "大正池を作った焼岳"); // ======= 入力2:その他の設定 ======= var haba =400; // 表示する幅(ピクセル)(初期値 400) var taka =0; // 表示する高さ(ピクセル) 0ならば自動設定 var str="0"; // 開始スイッチの画像 0ならばボタン選択 var stp="../parts/stp.gif"; // 停止スイッチの画像 // ************************* 入力事項ここまで **************************
<!-- ******************** 表示をデザインする ********************** --> <table style="margin-left:100"><tr><td align="center"> <!-- タイトル --> <span style="font:bold 15pt MS ゴシック; color:#000000">北アルプスの風景</span><br> <!-- スライド本体 --> <span id="slide" style="border:solid 15 #000000; margin:5 0"></span><br> <!-- コメント --> <span id="comm" style="border:inset 1.5 #a0a080; font:11pt MS ゴシック; margin:5 0; padding:5; background-color:#ffffff">コメント</span><br> <!-- スイッチ --> <span id="swit"></span> </td></tr></table> <!-- ************************* ここまで *************************** -->
<script type="text/javascript"> <!--//_ slide_swit00_cm ver1.20 (ぱーぷりんの溜まり場) ugoku=new Array(); // この行は触らないで・・ // *************************** 入力事項 ***************************** // ======= 入力1:スライド画像の設定 ======= // 出したい画像の種類を必要数だけ入力(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", "大正池を作った焼岳"); // ======= 入力2:その他の設定 ======= var haba = 400; // 表示する幅(ピクセル)(初期値 400) var taka = 0; // 表示する高さ(ピクセル) 0ならば自動設定 var str = "0"; // スライド開始スイッチの画像 「0」ならばボタン選択 var stp = "../parts/stp.gif"; // スライド停止スイッチの画像 // ************************* 入力事項ここまで ************************** var mai=ugoku.length-1; // 写真の全枚数 var n=0; gaku=new Array("none","solid","double","groove","ridge","inset","outset"); // 画像の設定 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"; // コメントの設定 comm.innerHTML=ugoku[0][1]; comm.style.width=haba; // コントロールスイッチの設定 if (str!=0) { swit.innerHTML="<span onclick='slideback()'><img src='"+str+ "' border=0 hspace=20></span><span onclick='slidenext()'><img src='"+stp+ "' border=0 hspace=20></span>"; } else { swit.innerHTML="<input type='button' value='back' onClick='slideback()'>"+ " <input type='button' value='next' onClick='slidenext()'>"; } // ----- 関 数 ----- function slidenext(){ if( n >= mai ) { n=0; } else { n+=1; } comm.innerHTML=ugoku[n][1]; document.imgs.src=ugoku[n][0]; } function slideback(){ if( n <= 0 ) { n=mai; } else { n-=1; } comm.innerHTML=ugoku[n][1]; document.imgs.src=ugoku[n][0]; } //--> </script>