本日  昨日
 
03/16(Sun) 01:35

o 画像のトランジション表示(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>)に以下の関数を定義します。

  1. filterの使い方は、(1)Apply()を呼び出した後、(2)filter処理したい内容を記述(サンプルはvisibleにする)して、(3)Play()を実行する、の手順になります。
  2. item(0)は定義されてるfilterを表します。item(0)の代わりにRevealTransと指定しても同じです。
<script language="javascript"> <!-- //画像のトランジション表示 by「菊池さん」<http://kikuchisan.net/> function Reveal_Trans(){ if(document.all) { //IE4以上のとき images.filters.item(0).Apply(); images.style.visibility = "visible"; images.filters.item(0).Play(); } } // --> </script>


BODYタグにonload="Reveal_Trans()"を追加します。

<BODY bgcolor="lightyellow" text="navy" onload="Reveal_Trans()">


ボディ部(<BODY>〜</BODY>)の表示したい場所に下の記述をします。

変更する箇所は以下のとおりです。あなたのページに合わせて変更して下さい。

  1. id="images" はこの画像の識別名です。関数Reveal_Trans()のimagesと同じ名前にします。名前は自由に設定出来ます。
  2. img src="../gif/title.gif"にあなたの表示したい画像を指定します。
  3. Duration=3 は変化のスピード、Transition=23 は変化のパターンです。サンプルはページに入るとランダムに変化させたいので 23 を指定しています。
  4. width=240 height=80をあなたの画像サイズに合わせて変更します。
<!-- 画像のトランジション表示 --> <img id="images" src="../gif/title.gif" style="filter:RevealTrans(Duration=3,Transition=23); visibility:hidden" alt="97/05/18開設" width=240 height=80>

 
 
©1997- Kikuchisan's workshop All rights reserved //

スポンサーリンク

関連コンテンツ