スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

連載-29 トランジションフィルターの使い方

 今まで書いてきたスタイルシートでのフィルターの指定のやり方は、ほとんどが、スタイルのなかに記述するだけで機能するが、トランジションフィルターはそれだけではフィルターの役割を果たしてくれません。このフィルターが機能するには、マウスのクリックなどのイベントで起動するJavascriptなどのプログラムで、フィルターのかけられたオブジェクトを切り替えることになります。ここで、その手順を簡単に書きます。

 ここでは画像のスタイルにフィルターをセットし、その画像のソースを切り替えて、トランジションフィルターを機能させる例で説明いたします。

? 画像のスタイルにフィルターをセットする。ここではBarnフィルター。

<img src="画像AのURL" style="filter:progid:DXImageTransform.Microsoft.Barn(duration=2, motion='out', orientation='vertical')" />

? この画像をクリックすると画像が切り替わるイベントのスクリプトをこの画像タグの中に記述する。

this.src='画像BのURL';

 これだけではまだ画像が瞬時に入れ替わるだけでフィルター効果ははたらきません。

? 画像を切り替えるスクリプト this.src='画像2のURL'; の前後に、まじないのスクリプト(お決まり)を書き加えてやると、フィルターが機能し始めます。

  まず、前に    this.filters[0].apply(); //準備します
  そして、後ろに  this.filters[0].play(); //トランジションを実行します。

を加えて、スクリプトを書き換えて終わりです。
 スクリプトは以下のようになります。

onclick="this.filters[0].apply();this.src='画像BのURL';this.filters[0].play();"

 このスクリプトを加えて全体のソースは、ブログのお決まりのおまじないも加えて次のとおりです。(<>は半角に、改行は削除)

<span style="font-size:1px;color:#ffffff">
<<img src="画像AのURL"
style="filter:progid:DXImageTransform.Microsoft.Barn(duration=2, motion='out', orientation='vertical')"
onclick="this.filters[0].apply();
this.src='画像BのURL';
this.filters[0].play();"></span>


<



 

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。