ユンサンの／융상의／YungSang's

DesignWalker の管理人さんにお願いして、
AoD ! に新たに透過PNGを使ったデザインのテンプレートを追加してもらいました。

透過PNGは、透過GIFと違って透過部分がAlpha処理されて影とかが綺麗なんですね。

でも、IE7以前のIEではCSSでIE独自拡張のfilterを使ったりしないとならなくて、結構面倒かったりします。

そう思っていたら、簡単な解決方法を発見したので、早速試してみました。

使い方は、iepngfix.htc というスクリプトを用意して、
下記のようなスタイルを、使いたいページのスタイルシートに追加するだけ！

<style type="text/css">
* html .iepngfix {
  behavior: url(iepngfix.htc);
}
</style>

* html が付いているのは、IE5.5 とか IE6 にだけ適応させる CSS Hack ですね。
そして、ここでは iepngfix というクラス名がついている 透過PNG が使われている画像に対して htc というスクリプトを適応させています。
しかも、背景画像に透過PNGが使われていても透過にしてくれます！
セレクタに img や div とかを指定してもいいのですが、全ての要素でスクリプトが動くので重くなってしまいます。
ので、なるべく 透過PNGが使われている要素にクラス名を指定すると良いでしょう。

ただし！
※この htc は、ページと同じドメイン／サーバーに無いとエラーになってしまいますので注意が必要です。
※この htc のソースの中にある blankImg の指定行は自分のサーバー内のファイルに書き換えないとなりません。
換えなくても、myselfArchiverさんのところで上手く動いているみたいですね。 でも、出来れば換えて下さい。(2007/01/11 追記)
※指定する要素には、必ず、width と height を指定しないと、変な大きさに変換されることがあります。

さて、でもこれでは上記問題により、AoD !のようないろんなサイトで使用されるスクリプトでは使えません。
各サイトで iepngfix.htc をセットしなければならなくなってしまいます。

そこで、新たな方法を思いついたので、試してみました。

それは、iepngfix.htc を iepngfix.js に改造（＋改良）して、
behavior: url(iepngfix.htc);
の代わりに、
behavior: expression(IEPNGFIX.fix(this));
というように、expression() を使う方法です。
expression() は CSS内でJavaScriptを使用して動的にスタイル指定出来るIEの拡張機能です
。 普通は expression()の中にJavaScriptを書くのですが、外部ファイルの関数も呼べます！

<script src="iepngfix.js" charset="utf-8" type="text/javascript"></script>
<style type="text/css">
* html .iepngfix {
	behavior: expression(IEPNGFIX.fix(this));
}
</style>

これを AoD ! に内蔵しました。
めでたし。めでたし。

と思ったら、通常の使用ではOKだけど、AoD ! のように、
１．透過PNGを動的に差し替えたりした場合、IEPNGFIX.fix() を再度呼んであげる必要があります。
２．透過PNGを背景にしたエリアを動的にロードするような場合は、
ロード後に IEPNGFIX.fixchild() を適宜呼んでやらないと、リンクやイベントがうまく動かないケースがあるようです。