PNG Behavior for VML Render

Alpha Chanel PNG image support (半透明PNG表示サポート)

2005/07/17 (Ver 0.7.2)

 Windows版IE 5.0の 独自拡張ビヘイビア (HTML Components)を用いて <IMG>タグを XML技術を使用したVML<v:image />タグに表示変更するコンポーネントです。

このページでは、すでに PNG Behaviorを使用しています。 巻末の表示テストをご覧ください。 Internet Exploror Windows版でご覧になる場合、IE5以降かつVMLに対応していれば表示可能です。

なお、Netscape 6(Mozilla)、Opera 6、Safari、MacOS版 IE 5及び、Win XP/2003/Vista 版 IE 7では、標準で半透明(アルファチャネル)PNGをご覧になれます。

ダウンロード、サンプルテスト

上手くダウンロード出来ない時は、右クリックで「名前を付けて保存(対象をファイルに保存)」してください。

設置方法

使用設置に関する注意事項

設定値に関する情報

PNG Behavior for VML Render 機能
IMG 属性VML:IMAGE 置き換え属性対応済みか?
srcsrcO
ididO
stylestyleO
width(css) widthO
height(css) heightO
altaltO
titletitleO
classclassO
align(css) floatO
hspace(css) margin-left; margin-rightO
vspace(css) margin-top; margin-bottomO
border(css) border: px solid #00000O
usemap-x
ismap-x
longdesc-x
イベントハンドラ-x
Internet Exploer(Win)ブラウザ対応テスト結果
バージョン結果/期待?実験済みか?
7.0アルファチャネルPNGに標準対応の為動作を除外する(予定)X
6.0 SP1(標準準拠モード)動作する。但し、display: block又は、float(align)が必須。O
6.0 SP1(後方互換モード)動作する。
5.5VMLで擬似アルファ透過になる
透明度系は、ディザリング化される
5.01
4.01VMLに未対応X

更新履歴

Ver 0.7.2 [2005/07/17]
IE 7.0対策調整をしました。
Ver 0.7.1 [2004/06/21]
コードの簡略化と調整をしました。
Ver 0.7.0 [2004/06/20]
CSS 指定が、BODY 要素に変更されました。
IE 6.0 標準準拠モードでの表示が有効化されました。
xml:namespace が隠蔽化され、Behavior 記述のみで動作する様になりました。
イメージジャンプ設定が内蔵化されて、右クリック(oncontextmenu IE 5.5 以降)で実ウインドウ表示可能になりました。

>> 以前の更新履歴 (txt)

Behavior Test 1 (normal)

Hiro Konda's Web title (24Bit AlphaCanel-PNG)
<img id="title" class="AlphaPng" src="../../../image/konda-24a.png" width="230" height="54" alt="Hiro Konda's Web" title="Hiro Konda's Web (This is Alpha-PNG image!!)" />

Hiro Konda's Web

Behavior Test 2 (Id Style)

Hiro Konda's Web title (background-color, border and margin style)
<style type="text/css">#title2 { background-color: #00ffff; border: 2px #ffff00 solid; margin: 20px 40px 10px 100px;}</style>
<img id="title2" class="AlphaPng" src="../../../image/konda-24a.png" width="230" height="54" alt="Hiro Konda's Web" title="Hiro Konda's Web (This is Alpha-PNG image!!)" />

123Hiro Konda's Web456

Behavior Test 3 (Inline Style)

Alpha Chanel PNG Gradient (float, cursor and background-image style)
<img id="sun" class="AlphaPng" style="float: right; cursor: pointer; background-position: 90% 80%; background-repeat: no-repeat; background-image: url(../../../new/png/konda_gray_alpha.png) !important; background-attachment: fixed; border-width: 2px; border-color: #00ff00; border-style: dotted" src="../../../new/png/alpha_8bit_sun.png" width="320" height="240" alt="Alpha Chanel PNG Gradient" title="Alpha Chanel PNG Gradient" />

Alpha Chanel PNG Gradient float(right) position.