SmallStyle

_ Lightbox JS での 背景画像 (overlay.png) の配置場所

Lightbox JS を使って画像表示をかっこよくみせてみるで，Firefox だとポップアップした画像の周りが暗くなって見えるのですが，IE で表示させると画像のポップアップのみで，背景はそのままになってしまいました．Lightbox JS の配布元では IE でもちゃんと背景も表示されてるから，うちのサイトでの CSS 周りで何か問題があるのだろうと調べてみた結果，単純に背景画像の，overlay.png のPATHの指定が間違っていたのが問題でした．

Lightbox JS の配布元でダウンロードできる CSS では，IE で透過 PNG を表示させるために以下のようなコードが書かれています．

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");

Firefox など PNG のアルファチャンネルをサポートしているモダンブラウザでは，

background-image: url(overlay.png);

で，背景を透過してくれるのですが，現在の IE ではサポートされていません（ IE 7 ではサポートされる予定）．

何が悪かったのかというと，CSS からの画像の読み込みは，CSS ファイルのあるディレクトリがカレントディレクトリで，そこからの相対 PATH を指定するもんだと思い込んでいたものですから，当然のように，AlphaImageLoader の src で指定する画像の PATH も同じだろうと考えていました．ところが，AlphaImageLoader の場合は，現在表示しているディレクトリからの相対 PATH を元に画像を参照するようです．

今回の場合，CSS ファイルと画像ファイルを同じディレクトリに配置したので，Firefox では画像を参照できたけど，IE の場合はそれが参照できていなかったというただそれだけのこと．Web サーバのログを確認すればすぐわかったものの，うっかり見逃しちゃってた．とりあえず，IE でも Firefox でも同じ動きをしてくれるようになったので，やっとすっきりした．

というわけで，このサーバでは overlay.png は theme ディレクトリと同じところに配置しているので，

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="theme/smallstyle-3/overlay.png", sizingMethod="scale");

と指定することで解決できました．