g011
Copyright(C) 2004 web工房 All Rights Reserved
action
|
【技g011-1】 画像やリンク文字にマウスが重なったら、 画像がワイプして入れ替わる 左の画像にマウスカーソルを重ねて下さい 下のリンク文字にマウスを重ねても ワイプして画像が替わる |
|
【技g011-2】 画像が一定時間間隔で連続的に ワイプして入れ替わる 画像が切り替わらないときは ｢開始｣ボタンをクッリクして下さい |
web技
■【技g011-1】画像やリンク文字にマウスが重なったら、画像がワイプして入れ替わる
◆手順1【画像の設置とスタイル設定/スクリプトの実行】
※<body〜>に記述して下さい。
※下記ではwidth/heigt/alt/title等の属性は省略しています
※<img>にname属性を設定して下さい
※style属性によりあらかじめフィルタ属性でrevealTrans()を設定しワイプ時間(duration)とワイプの種類(transition)を指定します
※画像にマウスオンしたときのイベントハンドラを設定し、スクリプトを実行します
-----次の行から(copy)-----
<img src="photo/001_1.JPG" name="IMG_1"
style="filter:revealTrans(duration=2,transition=10)"
onmouseover="if(document.images) Img_Wipe(IMG_1,'photo/001_2.JPG');"
onmouseout="if(document.images) Img_Wipe(IMG_1,'photo/001_1.JPG');">
-----上の行まで(copy)-----
◆revealTrans()、ワイプ時間(duration)とワイプの種類(transition)の詳細は
[技k013]リンク先のファイルをワイプして開く
を参照して下さい。
◆onmouseover="if(document.images)...>の詳細は
[技m005]画像にマウスを重ねると別の画像を表示する
を参照して下さい。
◆手順2【スクリプト】
※<head>〜</head>に記述して下さい。
※ Img_Wipe(ImgID,ImgPath)の引数は
ImgID:画像のname属性
ImgPath:表示する画像の相対パス
-----次の行から(copy)-----
<script type="text/javascript">
<!--
function Img_Wipe(ImgID,ImgPath){
ImgID.filters.revealTrans.Apply();
ImgID.src=ImgPath;
ImgID.filters.revealTrans.Play();
}
</script>
-----上の行まで(copy)-----
※リンク文字にカーソルを重ねたときに画像が入れ替わる場合でも、上記のスクリプトがそのまま使えます。
■【技g011-2】画像が連続的にワイプして入れ替わる
◆[技g003]画像を一定時間ごとに入れ替える、をそのまま流用しています
※[技g003]のスクリプトの変更点は下記のとおりです（下線部が追加した部分）。
-----次の行から(copy)-----
function ChangeImg() {
count++;
count %= TOTAL;
document.IMAGE.filters.revealTrans.Apply();
document.IMAGE.src=FOLDER + "/" + count + "." + FILE; //画像を表示
document.IMAGE.filters.revealTrans.Play();
document.FORM.MSG.value = count + 1; //画像Noを表示
}
-----上の行まで(copy)-----
※画像にname属性とstyle属性を設定するのは【技g011-1】と同じです
<img src="photo/0.JPG" name="IMAGE" style="filter:revealTrans(duration=1,transition=23)">
※本例ではワイプの種類をランダム(transition=23)に設定していますが、実際にはランダムにならないようです。解説を参照して下さい。
解説等
◆ワイプ指定(transition=0〜23)は[技k013]で解説しています。
◆【技g011-2】で、ワイプの種類をランダム(transition=23)に設定しても、実際には同じワイプの繰り返しになります。但し、本技をリロードすると別なワイプになります。
◆前述の如く【技g011-2】の画像を一定時間間隔で連続的に切り換える部分技は、[技g003]をそのまま適用しています。例で用いている画像も全く同じです。比べてみて下さい。
keyword
◇filters.revealTrans
history
◇(2004.09.25)設置
注意
◆このファイルで実際に動作しているスクリプトは外部jsスクリプトにしています。
◆サンプルファイルはその都度、新しいウィンドウにタグや文章を書き込んでいます(技[k009]参照)。
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----