透過PNGの罠

IE7で透過PNGがサポートされて、以前からもありましたが、透過PNGをIE5.5、6でも表示させるJSライブラリがいくつか出ています。

これらのライブラリは、IE独自のAlphaImageLoaderフィルターを利用して擬似的に透過PNG表示をさせています。

でも、このAlphaImageLoaderフィルターには、癖があって、それで以前にハマったことがあります。


実例

IE6(5.5)で見てください。
吹き出しの中のLingerへのリンクをクリックして移動することができますか？

原因

原因がさっぱりわからなかったので、ライブラリの中身を見て、AlphaImageLoaderで検索したところ以下の情報が。


PNG ちょっと裏技 (2)
http://www.minc.ne.jp/~konda/new/png/urawaza02.html

アルファイメージローダーを使用した要素(タグ)の内側にハイパーリンクを使う場合

　ブロック要素(例えばDIV)に対してアルファイメージローダーを使用すると、構造の内部(インライン)のハイパーリンクが押せなくなる(無効になる)場合が有ります。また、BODY要素(タグ)でも同様の現象が発生します。

な、なんだってーーー!!


結局、その時は吹き出し内のリンクがひとつに限定されていたので、divタグにonclickでページ移動するコードを書くという強引な方法で回避しました。

この現象は、背景にAlphaImageLoaderフィルターで透過PNGを表示させ、そのPNGの非透明部分に重なる形でリンクを表示させた場合に起きるようです。

なので、JSライブラリを使って透過PNGを背景に表示する場合は、中にリンクが含まれる可能性がないか注意する必要があります。

追記：
透過PNGの罠の解決法-とあるWEBクリエイターのblog
http://web.kankodo.net/2007/02/09-142542.html<

解決方法をいろいろ模索してみたのですが、AlphaImageLoaderフィルターを指定している要素内のa要素のposition属性にrelativeを指定すれば解決できます。

な、なん（ry


おお、たしかに！
ありがとうございますm(__)m

さっそく問題が出ていたページの修正を試みたのですが、こちらは現象変わらず。

調べてみると、どうやら親要素にposition属性(static以外)が指定されているとリンク無効になるようです。

透過PNGを適用していたのが地図上の吹き出しで、position:absoluteで配置せざるを得ないのが、悩みどころ。

こちらは、やはりGoogle Mapsの吹き出しのように分割するのがまっとうかも。