home page 小粋に

８-１０

　小技で小粋に-１０
　　　ボタンで画像切り替えしたいっ。

『答え』　JavaScriptで画像切り替えボタンを使いましょう。

自動で切り替えする技は紹介致しましたが、ボタンで切り替えしたいというご要望に応えましょうか。やはりJava Scriptで対応しますが、まずは下の「picture-CHANGE」ボタンで味わって下さいませ。

画像は６個ですが、「画像を小粋に切り替えましょう」で使った通りのものですので。
下記のＨＴＭＬ文をお使い下さい。（JavaScriptの仕掛け部分を<HEAD></HEAD>の間に入れること以外は難しい部分は無いと思います）

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var fade_duration = 8;
var image = new Array();

image[0] = 'SAMURAI.JPG';image[1] = 'SANJURO.JPG';image[2] = 'TENGOKU.JPG';
image[3] = 'YOUJINBO.JPG';image[4] = 'SUGATA.JPG';image[5] = 'IKIRU.JPG';
var t;
var j = 1;
var p = image.length;
var pre_load = new Array();
for (i = 0; i < p; i++) {
  pre_load[i] = new Image();
  pre_load[i].src = image[i];
}
function chg_img() {
  if (document.all) {
    document.images.SlideShow.style.filter="blendTrans(duration=fade_duration)";
    document.images.SlideShow.filters.blendTrans.Apply();
  }
  document.images.SlideShow.src = pre_load[j].src;
  if (document.all) {
    document.images.SlideShow.filters.blendTrans.Play();
  }
  j = j + 1;
  if (j > (p - 1)) j = 0;
  }
//-->
</SCRIPT>
</HEAD>
「picture-CHANGE」ボタンで味わって下さいませ。<br>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
<form>
<INPUT TYPE="BUTTON" Name="ssbutton" VALUE="picture-ＣＨＡＮＧＥ" onClick="chg_img()"></form>
<img src="SUGATA.JPG" name='SlideShow'>
</td></tr>
</table>

既にご理解されていると思いますが、画像用のフォルダ（例えば、pictという名前の画像フォルダ）を作って入れた場合は上記の image[0] = 'SAMURAI.JPG';image[1] = 'SANJURO.JPG';という書き方の部分は image[0] = 'pict/SAMURAI.JPG';image[1] = 'pict/SANJURO.JPG';という形になることをお忘れなく。

質問メール

ＯＺ道場メニュー