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をご覧になれます。

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

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

• ビヘイビア ダウンロード → png2vml.htc (2870 Bytes / Shift_JIS [LF])
• ソースコード → png2vml.txt (2870 Bytes / Shift_JIS [LF])

設置方法

• 直接 HTML(ページ) の head 部に style 埋め込みする場合は、次の様にします。

  <style type="text/css">
  body { behavior: url(./png2vml.htc)}
  </style>

• 稀に(IE 5.0以降標準の)VMLサポートを搭載していない Windows IE ユーザーがいらっしゃるようですが、そのような事例を回避する場合には、外部 CSS による使用を止めて直接 HTML(ページ)のスタイル埋め込みでビヘイビアを使用する方が良いと思われます。

  <!--[if (lte ie 6.0 & gte vml 1)]>
  <style type="text/css">
  body { behavior: url(./png2vml.htc);}
  </style>
  <![endif]-->

• 初期状態のビヘイビアで半透明PNGを使用する場合は、IMG要素のクラス属性を class="AlphaPng" としてください。
  クラス属性名を変更する方法は、後述の設定値に関する情報 をご覧ください。
• VMLに未対応ブラウザの場合以下のコメント(Conditional Comments 英語情報)を使用して処理を行います。
  いわゆるVMLをサポートしない Windows版 IE 5 - 6.0の場合、コメント内部の表示(処理)が、有効になります。
  (例)
  <!--[if (lte ie 6.0 & gte vml 1)]><p>現在ご利用の Internet Explorerでは、VMLがサポートされていません。
IE 5.0以降標準のVMLサポートを有効にしてください。</p><![endif]-->
• PNG Behavior for VML Render 機能表、ブラウザ対応表は、ページ末をご覧ください。

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

• 初期設置状態では、VML置き換え対象 IMG 要素は、 var allowClass = 'AlphaPng'; となっています。
  そのために指定通り IMG 要素のクラス指定 class="AlphaPng"を行ってください。
  全ての PNG 画像をVMLに置き換えたいので有れば var allowClass = ''; としてください。
• IE 6.0 標準準拠モードでは、display : inline は、無効です。したがって、float(CSS)や、align(物理属性)を指定しない場合、実際の見栄えが他のブラウザと異なる場合が有ります。
  これは標準準拠モードのバグを回避する為の現時点での仕様です。
• 配布しているHTCによるVML画像では、「画像を保存する」を実行及び、ドラッグ & ドロップできません。
  しかし、イメージジャンプ設定 var imgJump = true; であると、JavaScript の 右クリックメニューイベントハンドラ(oncontextmenu IE 5.5 以降)でダイアログによる直接画像表示が可能となります。
• HTC (Behavior)ファイル使用の共通注意点を読まれていない方は、お読みください。 (別ページ)

設定値に関する情報

• var allowPngClass = 'AlphaPng';
  VML画像化する IMGタグ(要素)のクラス名を指定します。
  空にすると 全てのIMGタグによるPNG画像を VML画像に置き換えます。
• var imgJump = true;
  VML画像を右クリックすると画像のみをブラウザ表示するか尋ねます。(IE 5.5以降) 偽ならば false を与えます。
  なお、JavaScriptに依存する処理ですので、JavaScriptが無効化されているならば画像を保存する一連の動作が不能となります。
• var pngCounter = '';
  半透明PNG出力に対応した PNG画像CGI カウンタースクリプト名を与えます。
  (例) PNG式画像カウンタ (桜月氏)のファイル名(counterp.cgi)

PNG Behavior for VML Render 機能

IMG 属性	VML:IMAGE 置き換え属性	対応済みか?
src	src	O
id	id	O
style	style	O
width	(css) width	O
height	(css) height	O
alt	alt	O
title	title	O
class	class	O
align	(css) float	O
hspace	(css) margin-left; margin-right	O
vspace	(css) margin-top; margin-bottom	O
border	(css) border: px solid #00000	O
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.5	VMLで擬似アルファ透過になる 透明度系は、ディザリング化される
5.01
4.01	VMLに未対応	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)