IE6で透過pngを表示させる方法

質問

いつもお世話になっています。
マウスオーバーで画像Aの上に画像Bが表示されるというjavascriptを作りました。画像BはAに重なるので、
http://allabout.co.jp/internet/hpcreate/closeup/CU20040510A/
で教えてもらったposition: relative;、position: absolute;のCSSを使って配置し、javascriptでマウスオーバー・アウトさせています。

無事うまくいったのですが、Bが透過pngなので、IE6で表示が乱れます。そこでこちらで似たような質問を検索し、http://www.koikikukan.com/archives/2007/08/14-015513.php
のpngfix.jsを使うのだと知りました。
早速ダウンロードし、htmlのheadに
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
を書き、htmlと同じ階層にpngfix.jsをアップロードしましたが、全然ダメでした。何を間違ってるんでしょうか？自分でもしや？と思うことは

・position: relative;、position: absolute;　を使っている
・画像Aの上にBがマウスオーバー・アウトするjavascriptは外部ファイルにしている
・IE6のスタンドアローン版でチェックした(ただこれは正規のIE6を使用している人に見てもらってやはり透過していないと確認済です)

以上です。制作環境はWinXP、Dreamweaver8です。

このpngfix.jsを使用する方法がダメだったらjavascriptで作っている部分をFLASHで作り直すしかないと思っていますが、透過pngはFLASHであればIE6でも表示されるのでしょうか？
長くなりましたが、お知恵をお貸りできれば助かります！知識がなくすみません…。

回答No.4

tenderfeel · ベストアンサー

ソースが分からないのでエスパー回答になります。

pngfix系javascriptはIE独自拡張のAlphaImageLoaderフィルター(CSS)を使っています。
pngfix.jsはドキュメントロード時に、PNGという拡張子がある画像をstyle属性にAlphaImageLoaderを持つspanに変更しますので、
ロード時には読まれてないロールオーバー画像をfixさせることが出来ないのだと思います。
画像ロード→AlphaImageLoaderを適用しておく→一旦非表示にする→マウスオーバーで表示
という動作をロールオーバーさせているjavascriptでやれば表示されるかもしれません。

>透過pngはFLASHであればIE6でも表示されるのでしょうか？
FLASHも背景透過は可能ですが、FLASHで作った時点でswfになりますからPNGじゃなくなりますよ。

ボタンやメニューならFLASHを使って作った方が、javascriptも必要なくなるので手っ取り早いかもしれません。
（ロールオーバーさせてる要素そのものをFLASHで作るという意味で）

お礼

ご回答ありがとうございます。

＞pngfix.jsはドキュメントロード時に、PNGという拡張子がある画像をstyle属性にAlphaImageLoaderを持つspanに変更しますので、
ロード時には読まれてないロールオーバー画像をfixさせることが出来ないのだと思います。
そうだったんですか！なんで適応されないんだろう、というのも疑問だったのですっきりしました。解説ありがとうございます。

＞画像ロード→AlphaImageLoaderを適用しておく→一旦非表示にする→マウスオーバーで表示という動作をロールオーバーさせているjavascript
やりたいけど、今の私のわずかなjavascript知識では無理そうな気がします…。無念！せっかく教えて下さったのにすみません。
結局FLASHで作った方が早そうなので、今回はFLASHをがんばってみます。

＞FLASHも背景透過は可能ですが、FLASHで作った時点でswfになりますからPNGじゃなくなりますよ。
おっしゃる通りですね！なんで私分からなかったんだろう…。どこまでアホなんだ、自分。こんな私に優しく教えて下さりありがとうございました。

皆さんお忙しいところ本当にありがとうございました。FLASHを学ぶ旅に出ます。またどこかで見かけたら教えてやってください。

補足

皆さんに良回答おつけできなくて、申し訳ないです。ありがとうございました。

回答No.3

ORUKA1951

ie6.jsとかもあるようです。
ちょっと席を離れるので・・

お礼

ORUKA1951さま、お忙しいところわざわざ追加投稿本当にありがとうございます！
下記お礼に書いたようにこの機会にFLASHを勉強しようという結論に至りつつありますが(せっかく2回も教えて下さったのにすみません)、今後の参考に拝見します。
ありがとうございました。

回答No.2

ORUKA1951

IEのフェブ標準に比準拠には悩まされますね。
javascriptを使う方法として、
ie7-js - Google Code ( http://code.google.com/p/ie7-js/ )
などを使うのがよいかと思います。
使い方は
IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナル | なんとかなるわけよ ( http://www.rottel.net/sdj/3346 )
の下のほうのリンクを確認してください。

お礼

ご回答ありがとうございます。
>IEのフェブ標準に比準拠には悩まされますね。
ほんと、マイク○ソフトが憎いです…。なんでシェアNo1なのかしら、とWEBを作れば作るほど思います。

それはさておき、リンク拝見しました。でもうまくいかず…読んでもあまり分からなかったので、私の知識不足のせいだと思います。も少し勉強を積みます。

皆さんのご回答を拝見し、やはりFLASHにすることになりそうですが、今後の参考にさせていただきます。
ありがとうございました！

回答No.1

com58

スクリプトの方は判らないのですが、少し思ったことを。

おそらくフルカラーのpngを利用されているのだと思います（256色はちゃんと背景色抜いてくれた気がする）。もし、多少減色しても差し支えないようなものであれば、透過GIFを使うのも手ではないでしょうか。
FLASHを用いればフルカラーでも表示されますが、FLASHそのものが重かったり、プラグインが古かったりした場合は別途インストールしなければならず、閲覧者に不満が残るようにも感じます。
作成者のこだわりが出る部分なので、一概にあれがいいこれがいいとは言えませんが……。

GIFで代用可能ならGIF。フルカラーで、かつ透過させる必要が必ずあるのならFLASHで作成するという方法でもいいように感じます。

あとFLASHですが、ものすごく大ざっぱに言えば動画ファイルを貼り付けているようなものなので、FLASHが正しく作成されていれば綺麗に透過されたpngが表示できます。

お礼

こんにちは。
早速ご回答ありがとうございます。昨晩javascriptカテで投稿したところ全くご回答いただけず削除して今朝投稿しなおしたらこんなにたくさんのご回答をいただき、感激しています。

話がそれましたが、最初gifで作っていたのです。が、汚いと言われpngにしたのでした。やはりFLASHが良さそうですね。
FLASHの知識が全くないのでできれば避けたかったのですが…良い機会と前向きに捉えがんばってみます。
FLASHに使用するpngのことも教えて下さってありがとうございました。

ありがとうございました。早々にご回答下さって、とても嬉しかったです。