画像を変化させる   

マウスで画像を変化させる

<script Language=Javascript>
phot = Array(2);
phot[0]=new Image();phot[0]="ph0.jpg";
phot[1]=new Image();phot[1]="ph1.jpg";
function pchange(flag){
 document.photo.src=phot[flag]
}
</script>

onmousuイベントを使って、マウスが乗ったとき・離れたときに画像を変化させるものです。画像を表示させたい位置には以下のように書きます。ダミーのhrefを入れています。
<a href="#" onmouseover="pchange(1)" onmouseout="pchange(0)">
<img src="ph0.jpg" name="photo" border="0" width="160" height="120">
</a>

複数の画像をタイマーで変化

document.photo1.src=”画像ファイルb”
 imgタグの中の画像のファイル名を変更します。photo1は、nameオプションで定義した名前です。
<img src=”画像ファイルa” name=”photo1”> のaがbに変わります。
上の場合は、3ヶ所の画像を、それぞれ6秒ごとに変化させています。このために、ファイル名を変更する関数をつくり、1秒ごとにタイマー関数で呼び出し変化させています。

function 名前(){   ここに、作成する関数を記述する

setTimeout(”関数()”,n1)
 作った関数を、1000分のn1秒ごとに実行する組み込み関数(用意されている)

時間で、画像のwidth(幅)を変化させるタイマー

 document.画像の名前.width で、幅を変えられます。これとタイマーの組み合わせで、時間によって長さが変わる図形を表示できます。サンプルはここ