|
11/22(Fri) 03:36
複数画像のトランジション表示(IE4.0以上のみ)
（2014.5.12追記）IE4 で最初に導入された Internet Explorer の視覚的なフィルターとトランジションが、IE10 から削除されました。
該当ページの<head>内に、
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE9;">
を挿入すれば、常に互換表示モードで表示されます。但し、IE11では、画像は切り替わりますがトランジションにはなりません
ページ全体のトランジション表示は、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処理したい内容を記述(サンプルはimgfile[indx].srcの画像を表示する)して、(3)Play()を実行する、の手順になります。
- item(0)は定義されてるfilterを表します。item(0)の代わりにRevealTransと指定しても同じです。
- imgfile[0]〜imgfile[2]に画像データのパスを指定します。
imgfile[0]=new Image(); imgfile[0].src="../gif/title.gif";の赤字部分を変更します。 - 画像データを追加する場合は、imgfile[3]、imgfile[4]と配列の最後に追加してください。画像データは２つ以上であればいくつでもかまいません。
- images3.filters.item(0).transition = 23; に２回目以降の変化パターンを指定します。この値を23以外にすれば固定パターンを２回目以降繰り返します。
- また、この文を削除すれば<img>タグで指定したstyle文RevealTrans(Duration=3,Transition=23);で決定される初期値を繰り返します。例えば、23にすればランダムに決定された値の、それ以外の値にすればその値の固定パターンを繰り返します。色々試して見てください。
- setTimeout("Reveal_Trans3()",5000);の5000(ms)は繰り返し間隔です。
|
|
■BODYタグにonload="Reveal_Trans3()"を追加します。
|
|
■ボディ部(<BODY>〜</BODY>)の表示したい場所に下の記述をします。
変更する箇所は以下のとおりです。あなたのページに合わせて変更して下さい。
- id="images3" はこの画像の識別名です。関数Reveal_Trans3()のimages3と同じ名前にします。名前は自由に設定出来ます。
- img src="../gif/title2.gif"に最初に表示したい画像を指定します。サンプルでは最後の画像を指定しています。
- Duration=3 は変化のスピード、Transition=23 は変化のパターンです。サンプルはページに入るとランダムに変化させたいので 23 を指定しています。
- width=240 height=80をあなたの画像サイズに合わせて変更します。画像サイズが同じサイズでない場合はこのサイズに調整されます。調整したくない時はこのサイズ指定を削除すれば元画像サイズで表示されますが画面が振れます。
|
|
| スポンサーリンク | |