どうしたら Windows IE5、IE6で 24BitアルファチャネルPNGを透過させる事ができるのだろう？
Operaや、Netscape 6.2、Mozilla 0.9.6は、PNGを殆ど完全にサポートしているのに、最新の Internet Explorer 6 for Windows は、PNGを完全サポートしていません。
だが、IMGの変わりに ある方法(OBJECT)を用いる方法で、背景(BACKGROUND)指定を除いて表示させることも可能です。
今から行う方法は、W3Cに深い人にとっては邪道かな？と思いますが、Win-IEしか使用しないユーザーに、 どうしてもアルファチャネルPNGを見てもらえる様にする為には、一つの選択肢となるでしょう。
解説は、まず下の画像を見た後で...。
| 24Bit + Alpha-Chanel PNG(IMG) 11.4KB 放射状の 光のグラデーションです。透過率は、65%-96%。 |
8Bit Index-Palette PNG(IMG) 5.11KB インデックスパレットに 透過率指定しています。率は、65%-96%。 |
 |
 |
| 24Bit + Alpha-Chanel PNG+SVG(OBJECT) 11.4+0.3KB 上と同じ画像を使用しています。 |
8Bit Index-Palette PNG+SVG(OBJECT) 5.11+0.3KB 上と同じ画像を使用しています。 |
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="320" height="240" viewBox="0 0 320 240"> <g> <title>Alpha PNG IMAGE</title> <image x="0" y="0" width="320px" height="240px" xlink:href="alpha_sun.png"></image> </g> </svg>
....何だこれは ? 新手の HTMLかな ?
いいえ これは、xml技術を使用した Scalable Vector Graphics(SVG)と言います。
今回は、Adobe SVG ActiveXプラグインで PNG表示しているのです。
これは、アルファチャネルPNGを Win IEで無理やり表示させる為の裏技(笑)です。
上記のような SVG(xml)ソースを使用します。(ファイル位置や、幅、高さなどを合わせて適宜 変更してください。)
<svg viewBox="0 0 320 240"の所も ”始点x,始点y 幅, 高さ”で指定します。
<x="0" y="0"は、SVGでの画像のオブジェクト(ここでは、PNG画像)の位置です。
ブラウザのActiveXを 切っているユーザーには、見えないかも知れませんが 全く表示できない状態よりは 見てもらえる可能性が有ります。
MSの手により 実行しても安全だとマークされている ActiveXコントロールですから。(笑)
Adobe SVG ActiveXプラグインは、米国 Adobe社 のサイト(英語)で入手できます。
でも、ほとんど最近のWindowsマシン(98/ME/XP)は、Adobe Acrobatリーダー等を利用していると思うので 既にインストールして有るのでは無いでしょうか?
HTML上の準備は、どうするの?
<object classid="clsid:377B5106-3B4E-4A2D-8520-8767590CAC86" width="320" height="240"> <param name="src" value="test/alpha_sun.svg" /> <param name="wmode" value="transparent" /> <img src="test/alpha_sun.png" width="320" height="240" alt="alpha 24bit png image" /> </object>
上記のようなHTMLタグを使用します。(ファイル位置や、幅、高さなどを合わせて適宜 変更してください。)
OBJECT タグで SVGを使用するには、タグの中に type属性の type="image/svg+xml" や、type="image/svg-xml" を書くのですが
その場合、Netscapeタイプ SVGプラグインをインストールしている環境で見た場合、内蔵のSVGプラグインが反応する事が有ります。するとNetscape 4.78の場合 代替画像とSVGプラグインが同時に動作するのでレイアウトが崩れる恐れが有りますから、
このページの使用方法を用いる場合は、OBJECT内に type属性の記述は、やめておきましょう。
classid="" は、必要ないと言うサイトも見かけますが、ActiveXを使用する Internet Explorer for Windowsでは、
逆に 表示出来ないなどの悪影響(笑)を及ぼす可能性があります。
本来、classid=""は、HTML 4.01(Strict)で定義されるもので実行ファイルのURLを指定するのですが ActiveX(Windows)では、
プラグインの 内部呼び出しコードとして指定しているのです。
....結局 表示できるには出来たけど...。
全く表示出来ないよりは、...と思ったのですが
Adobeの SVG ActiveXプラグインは、若干アルファチャネルの透過合成が暗くなるようです。
そう言えば、...昔 Adobeは フォトショップの PNGでガンマ値バグしてくれた 前例が有りましたね...。
結果的に PNG透過処理で 完璧なのは、Netscape 6.2や、Mozilla 0.9.6、Opera 6等です。
可能なら見比べてみて下さい。
この裏技(SVG ActiveXプラグイン)を使う人が アルファチャネルの透過合成が暗くなる事情を許容できたら良いのですが...。
Adobeでさえもここまで出来るのですから MSの Windows IE 完全PNGサポートは、可能なはずです。
早急に 是正して欲しいのが願いでも有ります。(-_-)
このページの情報に関するご意見、ご質問等がありましたら 掲示板までどうぞ。
Adobe SVGプラグイン v 3.0は、Netscape 6/7のサポートを行っていません。
特に Windows版 Netscape 6/7 ユーザーは、Netscape 6/7へインストール(有効化)しないでください。クラッシュバグの原因です。
もし、 Windows版 Netscape 7/Geckoで SVGプラグインを試されたいのであれば、Adobe が ベータ版 を公開しているのでそちらを試してください。こちらは、クラッシュバグの症状がでません。
初 版: 02.4.26
| ブラウザ名 | バージョン | 結果/期待? | 実験済みか? |
|---|---|---|---|
| MS Internet Exploer(win) | 6.0 SP1 | SVG ActiveXプラグインでアルファ透過可能 | o |
| 5.5 | SVG ActiveXプラグインで アルファ透過を期待? | x | |
| 5.01 | |||
| 4.01 | |||
| Netscape (Win) | 7.0 | OBJECTが無効で IMGでのアルファ透過可能 但し Gecko PNG表示DLLに内在する透過バグで正しい表示にならない事もある。 | o |
| 6.23 | |||
| 6.01 | |||
| 4.78 | OBJECTが無効でIMGが表示される | ||
| 4.04 | OBJECTが無効でIMGが表示される | ||
| Mozilla (Win) | 1.7 | OBJECTが無効で IMGでのアルファ透過可能 但し Gecko PNG表示DLLに内在する透過バグで正しい表示にならない事もある。 | |
| 1.0 | |||
| m18 | |||
| Opera (Win) | 6.05 | OBJECTが無効で IMGでのアルファ透過可能 | |
| 7.02 | OBJECTが有効 (不完全な透過SVG) | ||
| 7.23 |
