ラジオスイッチで選択するスライドショーの JavaScript |
戻 る |
スライドショーの特徴
・ ラジオスイッチで選択して、画像を切り替えるスライドショーです。
・ 数値の設定だけで、画像表示が調整出来ます。
設定方法
まず、「ソースファイル」を、指示に従いコピーアンドペーストします。
（１）「表示をデザインする」の部分で、色に合わせて、次の設定をします。
■ スライドショー全体の左端からの空きを入れてください。
■ タイトル名を入れてください。
■ タイトル文字の文字の大きさと書体と色を、好みで変えてください。
■ タイトル名に代わり <img src="画像ファイル"> で画像も使えます。
■ スライドショー本体の、額縁の種類、額縁の太さ、額縁の色を、好みで変えてください。
※ 本項目の設定内容は、リンク先参照
■ ラジオスイッチの選択名の文字の大きさと書体を、好みで変えてください。
■ その他の設定がわかる方は、好みに合わせて指定を変更してください。
■ タグの解る方は、テーブルを解体して、任意にレイアウトしてください。
<!-- ************ 表示をデザインする ****************** -->
<table style="margin-left:10"><tr>
<td align="center">
<!-- タイトル -->
<span style="font:16pt HG創英角ﾎﾟｯﾌﾟ体; color:#808040;">北アルプスの風景</span><br>
<!-- スライド本体 -->
<div id="slide" style="border:ridge 18 #ffffc0; margin:5 10"></div> </td>
<!-- スイッチ -->
<td valign="top"><br><br>
<form name="myform" style="font:bold 11pt ＭＳ ゴシック"></form></td></tr>
</table>
<!-- ****************** ここまで ********************** -->
（２）「入力事項」の部分で、色に合わせて、次の設定をします。 太字は入力可能場所。
■ 「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ならば自動設定
// *********************** 入力事項ここまで ***************************
更新履歴
・05/06/10 ver 0.20 原画像の縦横比を読みとるように更新
・03/11/03 ver 0.10 デザインの指定法をタグで調整出来るように更新
・03/10/18 ver 0.02 テーブルでデザインする。設定方法の説明文修正
・03/10/14 ver 0.00 初 公 開
ソースファイル
・ まず、スライドショーを設置したい場所に、次の部分をコピーアンドペーストして下さい。
<!-- ************ 表示をデザインする ****************** -->
<table style="margin-left:10"><tr>
<td align="center">
<!-- タイトル -->
<span style="font:16pt HG創英角ﾎﾟｯﾌﾟ体; color:#808040;">北アルプスの風景</span><br>
<!-- スライド本体 -->
<div id="slide" style="border:ridge 18 #ffffc0; margin:5 10"></div> </td>
<!-- スイッチ -->
<td valign="top"><br><br>
<form name="myform" style="font:bold 11pt ＭＳ ゴシック"></form></td></tr>
</table>
<!-- ****************** ここまで ********************** -->
・ 次に、<body>〜</body>の間の任意の場所に、下記の部分をコピーアンドペーストして下さい。
<script type="text/javascript">
<!--//_slide01 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 = 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;
// ----- 関 数 -----
function changeImage(num){
document.imgs.src=ugoku[num][0]; }
// end -->
</script>