IE5.5、6はPNG透過画像を表示させると、アルファ部分が黒く表示されるという、嫌がらせのような仕様があります。これについては、Web系の本を何冊も買い漁っている人ならば、一度は目にした内容ではないでしょうか。
私も例外に漏れず、Webを勉強し始めた頃に本で目にして以来、作り物でPNG画像は一度も使っていないと思います。一度、どうしても透過を使用しなければならない事がありましたが、その時はGIFで作成しました。
ただ、PNG透過画像が使えれば表現が広がる事も確かですし、何とかならないかなとチェックはしていました。実は方法はあって、DirectXのAlphaImageLoaderを使って表示させる事が可能です。
cssのfilterプロパティで使用するのですが、いちいち指定が煩雑になるので、Javascriptで簡素化して使うか、IE用のスタイルを別途指定して使うのがスタンダードのようです。CSSでの実際の指定方法は次のようになります。
<html>
<head>
<title>test</title>
<style>
div.imagebox {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='001.png',sizingMethod='scale');
width:100px;
height:30px;
}
img.pngimage {
_display:none;
}
</style>
</head>
<body>
<div class="imagebox">
<img src="001.png" class="pngimage" width="100" height="30" alt="○○○○" title="○○○○" />
</div>
</body>
</html>
なんじゃコリャって感じですね。ｗ
内容的には、imgタグの画像を非表示にしておいて、その親要素divにAlphaImageLoaderで読んだ「001.png」という画像を表示せているというモノで、IE以外のブラウザはfilterを無視します。またimgタグの内容はアンダーバーハックでIEのみ非表示にさせており、他のブラウザでは無視されます。
この処理を簡単にするjsもかなり存在していますが、ひとまず今回はCSSのみでの方法を紹介。
jsを使っても、cssで指定しても、手間もソースも増えてしまうので、可能ならばpngを使わずに作るのが良いのかもしれません。ワダグシもこれはとっておきの場合のみ利用するつもりで温めているのですがね。ｗ