Alpha Transparency PNG - VMLでアルファチャンネルを含むPNG表示

2007年7月9日(月) 08:00

Alpha Transparency PNG VML
InternetExplorerでアルファチャンネルを含むPNGを表示する場合、AlphaImageLoaderを利用すれば簡単なことですが、VMLを利用した表示方法を紹介します。VMLはInternetExplorerでのみ利用できます。VMLを利用する前に、幾つか既存のドキュメントを修正しておく必要があります。

DOCTYPEの指定
VMLを利用する場合、DOCTYPE宣言をQuirks mode（互換モード）指定をするか、DOCTYPE宣言そのものを記述しないようにします。下記以外にも互換モードはあるので、別途確認してください。

// HTML4.0 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">// XHTML1.0 Strict
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

名前空間とCSS指定
Namespace（名前空間）を下記の要領で追加します。

<html xmlns:v="urn:schemas-microsoft-com:vml">

スタイルシートの記述を追加します。behavior以外にも、イメージにリンクが指定された場合、マウスポインタを変更するようにしておきます（デフォルトでは変更されません）。

<style type="text/css">
   v\:*   { behavior:url(#default#VML); }
   a v\:* { cursor:pointer; }
</style>

HTML記述でPNGイメージ指定
<img>タグの変わりにVMLタグを利用して表示させます。イメージ表示部分に下記のHTMLを記述します。画像サイズを指定しないと表示されないので、styleで指定しておきます。

<v:image src="./images/sample.png" style="width:300;height:300;" />

今回解説した方法は、ブラウザなど考慮していないため、実際に利用するにはJavaScriptやPHPなどでブラウザ判定を実装する必要があります。VMLに興味のある方は是非チャレンジしてみてください。

さくらインターネット