ラジオスイッチで選択するスライドショー（自由配置）の JavaScript |
戻 る |
まず、「ソースファイル」を、指示に従いコピーアンドペーストします。
（１）「表示をデザインする」の部分で、色に合わせて、次の設定をします。
■ ウィンドウ左端（left:）、および上端（top:）からの距離を、下記の部分毎に入力します。
タイトル部、 スライド本体部、 ラジオスイッチ部、 コメント部
■ タイトル名を入れてください。
■ タイトル文字の文字の大きさと書体と色を、好みで変えてください。
■ タイトル名に代わり <img src="画像ファイル"> で画像も使えます。
■ スライドショー本体の、額縁の種類、額縁の太さ、額縁の色を、好みで変えてください。
※ 本項目の設定内容は、リンク先参照
■ ラジオスイッチの選択名の文字の大きさを、好みで変えてください。
■ コメント窓の、枠の種類、枠の太さ、枠の色を、好みで変えてください。
※ 本項目の設定内容は、リンク先参照
■ コメント文の、文字の大きさ、背景色を、好みに合わせて指定を変更してください。
■ その他の設定がわかる方は、好みに合わせて指定を変更してください。
<!-- ************ 表示をデザインする ****************** -->
<!-- タイトル -->
<div style="position:absolute; left:270; top:60; font:bold 15pt HG丸ｺﾞｼｯｸM-PRO;
color:#608070; width=200;">北アルプスの冬景色</div>
<!-- スライド本体 -->
<div id="slide" style="position:absolute; left:30; top:90;
border:ridge 15 #d8ffc0"></div>
<!-- スイッチ -->
<form name="myform" style="position:absolute; left:480; top:140;
font-size:11pt"></form>
<!-- コメント -->
<div id="mytext" style="position:absolute; left:45; top:400; border:inset 2 #ffffff;
font-size:11pt; padding:3; width:400; height:40; overflow-y:scroll;
background-color:#ddeeff"></div>
<!-- ****************** ここまで ********************** -->
（２）「入力事項」の部分で、色に合わせて、次の設定をします。 太字は入力可能場所。
■ 「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 = 400 ; // 表示する画像幅 （ピクセル）（初期値 400）
var taka =0; // 表示する高さ（ピクセル） 0ならば自動設定
// *********************** 入力事項ここまで ***************************
<!-- ************ 表示をデザインする ****************** -->
<!-- タイトル -->
<div style="position:absolute; left:270; top:60; font:bold 15pt HG丸ｺﾞｼｯｸM-PRO;
color:#608070; width=200;"> 北アルプスの冬景色</div>
<!-- スライド本体 -->
<div id="slide" style="position:absolute; left:30; top:90; border:ridge 15 #d8ffc0"></div>
<!-- スイッチ -->
<form name="myform" style="position:absolute; left:480; top:140; font-size:11pt"></form>
<!-- コメント -->
<div id="mytext" style="position:absolute; left:45; top:400; border:inset 2 #ffffff;
font-size:11pt; padding:3; width:400; height:40; overflow-y:scroll;
background-color:#ddeeff"></div>
<!-- ****************** ここまで ********************** -->
<script type="text/javascript">
<!--// slide_swit02_free ver0.10 （ぱーぷりんの溜まり場）
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 = 400 ; // 表示する画像幅 （ピクセル）（初期値 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";
// コントロールスイッチの設定
var temp="<input type='radio' name='dum' checked onclick='changeImage(0)'>"+ugoku[0][1]+"<br>";
for(i=1; i<=mai; i++){
temp=temp+"<input type='radio' name='dum' onclick='changeImage("+i+")'>"+ugoku[i][1]+"<br>" }
myform.innerHTML=temp;
// コメントの設定
mytext.innerHTML=ugoku[0][2];
// ----- 関 数 -----
function changeImage(num){
mytext.innerHTML=ugoku[num][2];
document.imgs.src=ugoku[num][0]; }
// end -->
</script>