swfIR の導入ガイド

元記事

swfIR: swf Image Replacement

PamGau の記事

swfIR : HTML に埋め込まれた画像を .swf 上で加工した画像に置換 (PamGau)

導入手順

「元記事」のダウンロードパッケージ内の "swfir.txt" から抜粋して記載しています。同ファイルと照合の上、ご参照ください。

  1. "swfir.swf" と "swfir.js" とを同じディレクトリにアップロードします。
    両ファイルを異なるディレクトリに配置してもいいのですが、そうするとデフォルトから外れるので、後述の "src" 属性を指定しなくてはならず、面倒です。
  2. HTML ファイルの "head" 内に下記のコードを記述します。
    
<script type="text/javascript" src="swfir.js"></script>
  3. 上記のコードにおいて、"src" は "swfir.js" がアップロードされているディレクトリに応じて適宜変更してください。
    ブログで使う場合は、トップページと個別記事ページなどでそれぞれ記述する相対パスが変わってくるので注意が必要です。
  4. "body" 内の最下部にでも下記の JavaScript コードを記述します。
    
 <script type="text/javascript">
  window.onload = function() {
   var sir = new swfir();
  }
 </script>
    HTML が汚れるので今時の方法ではありません。もっとスマートで保守･管理が容易な方法はあるのですが、ここではその説明は割愛します。
  5. さらに上記 JavaScript コードに画像の加工処理のために属性とその値を設定します。
    
 <script type="text/javascript">
  window.onload = function() {
   var sir = new swfir();
   sir.specify([parameter], [value]);
   :
   :
  }
 </script>
  6. 画像処理用の個別の属性については後章をご参照ください。
  7. 処理対象となる埋め込み画像を指定するプロパティ "swap" を最後に記述します。これは重要です。
    例えば、 
    
   sir.swap('img');
    と書けば、HTML 内の全ての埋め込み画像が処理対象になります。
    また、 
    
   sir.swap('.topic');
    と書けば、『class = "topic"』とクラス指定されている画像だけが処理対象になります。
    さらに、 
    
   sir.swap('#super');
    と書けば、『id = "super"』と指定された(唯一の)画像が処理対象になります。
    つまり、CSS のセレクタに準じた表記を、プロパティ "swap" の引数として記述することになります。
  8. 複数の画像にそれぞれ異なる処理を施したい場合は、"new swfir();" で生成されるインスタンス( new swfir() の左辺値)を複数作成します。ただ、あまり多く作りすぎると、ページの動作が重くなります。
    
 <script type="text/javascript">
  window.onload = function() {
   var image0 = new swfir();
   image0.specify([parameter], [value]);
     :
     :
   image0.swap('.image0');
   
   var image1 = new swfir();
   image1.specify([parameter], [value]);
     :
     :
   image1.swap('.image1');
  }
 </script>

指定可能な属性

"swfir.txt" からのコピーです。未訳ですし、全ての属性を試してはいません。適宜、お試しください。

処理サンプル

オリジナル

枠のサンプル

枠

枠のサンプル

ドロップシャドウ

ぼかしなし

ドロップシャドウ - ぼかしなし

ぼかし入り

ドロップシャドウ - ぼかし入り

影色変更

ドロップシャドウ - 影色変更

角丸

角丸

傾斜

傾斜