winIE 5.5/6 で透過pngを表示する(2)

linkablePNG.png 前回、windows IE 5.5 / 6 でもアルファチャンネル付きpngファイルを透過表示する方法を取り上げました。

IEに実装されているフィルター機能alphaImageLorderを利用して、winIEでも半透明のpngを表示できるのですが、この方法で背景画像を貼り込んだブロック要素内ではリンクがクリックできない状態になってしまいます。 リンク同様、フォームのテキストエリアやボタン。スクロールバー等もクリックあるいは選択ができなくなました。どうもalphaImageLoaderは画像を背景に表示するのではなく、ブロックの手前に表示しているようです。

解決方法として、alphaImageLoaderで背景指定した「ブロック要素A」に内包される「ブロック要素B」を用意しposition: relative;を指定。ブロックB内にリンクを指定した要素を配置することで正常にクリックできるようになりました。

html:
<div>
  <div>
    <a href="http://example.com/">リンク</a>
  </div>
<div>
css:
#blockA {
  width: 180px;
  height: 180px;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod=scale);
}
#blockB {
  position: relative;
}

IE5.5/6のみを対象としてしまうならこれでもいいのですが、実際にこのままではwinIE 5.5/6以外のブラウザでは背景画像がない状態になります。 私の場合は条件付コメント(Conditional Comments)を利用して、すべてのブラウザに対しては普通に背景画像として透過pngを指定したcssファイルを、IE5.5/6には別ファイルのCSSを読み込ませています。

<!--[if gte IE 5.5000]>-->

</div></div>
このエントリーをはてなブックマークに追加
はてなブックマーク - winIE 5.5/6 で透過pngを表示する(2)
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]