|
09/16(Mon) 18:26
画像の反復トランジション表示(IE4.0以上のみ)
ページ全体のトランジション表示は、metaタグを使って下の様に書きますが
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=3,Transition=3)">
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3,Transition=2)">
このスクリプトは前のスクリプトの応用編で、ページをオープンすると指定した画像データをランダムに、トランジション表示を繰り返します。このスクリプトはIE4.0以上のみで有効です。Netscapeは何も変化しません。
■トランジションの値と画像の変化
このスクリプトではトランジションの値をランダム(Transition=23)に変化させてますが、値を固定すればいつも同じ表示にすることも出来ます。その場合は下のテーブルを参考にして下さい。
| 値 | 画像の変化 | 値 | 画像の変化 | 値 | 画像の変化 |
|---|---|---|---|---|---|
| 0 | 四角(外→中心) | 1 | 四角(中心→外) | 2 | 円(外→中心) |
| 3 | 円(中心→外) | 4 | ワイプ(下→上) | 5 | ワイプ(上→下) |
| 6 | ワイプ(左→右) | 7 | ワイプ(右→左) | 8 | ブラインド(縦) |
| 9 | ブラインド(横) | 10 | モザイク(左→右) | 11 | モザイク(上→下) |
| 12 | 点→全体 | 13 | スプリット(左右→中心) | 14 | スプリット(中心→左右) |
| 15 | スプリット(上下→中心) | 16 | スプリット(中心→上下) | 17 | 剥取り(右上→左下) |
| 18 | 剥取り(右下→左上) | 19 | 剥取り(左上→右下) | 20 | 剥取り(左下→右上) |
| 21 | 線→全体(横) | 22 | 線→全体(縦) | 23 | ランダム |
■設置方法
■ヘッダー部(<HEAD>〜</HEAD>)に以下の関数を定義します。
- filterの使い方は、(1)Apply()を呼び出した後、(2)filter処理したい内容を記述(サンプルはvisibleにする)して、(3)Play()を実行する、の手順になります。
- item(0)は定義されてるfilterを表します。item(0)の代わりにRevealTransと指定しても同じです。
- images2.filters.item(0).transition = 23; に２回目以降の変化パターンを指定します。この値を23以外にすれば固定パターンを２回目以降繰り返します。
- また、この文を削除すれば<img>タグで指定したstyle文RevealTrans(Duration=3,Transition=23);で決定される初期値を繰り返します。例えば、23にすればランダムに決定された値の、それ以外の値にすればその値の固定パターンを繰り返します。色々試して見てください。
- setTimeout("Reveal_Trans2()",5000);の5000(ms)は繰り返し間隔です。
|
|
■BODYタグにonload="Reveal_Trans2()"を追加します。
|
|
■ボディ部(<BODY>〜</BODY>)の表示したい場所に下の記述をします。
変更する箇所は以下のとおりです。あなたのページに合わせて変更して下さい。
- id="images2" はこの画像の識別名です。関数Reveal_Trans2()のimages2と同じ名前にします。名前は自由に設定出来ます。
- img src="../gif/title.gif"にあなたの表示したい画像を指定します。
- Duration=3 は変化のスピード、Transition=23 は変化のパターンです。サンプルはページに入るとランダムに変化させたいので 23 を指定しています。
- width=240 height=80をあなたの画像サイズに合わせて変更します。
|
|
| スポンサーリンク | |