ここでは当サイトで使用している『あれこれポップアップ』をアルファチャンネル付きpng画像に(やっと)標準対応した Internet Explorer 7 (以下 IE7) にとりあえず完全対応する方法を載せておきます。この作業を行うことにより、Win版IEでの DirectX Alpha Image Loader 関連の制限から開放されます。
ArekorePopup.js の70～74行目にWin版IEで DirectX Alpha Image Loader を使用するかどうかを設定する項目がありますが、 this.richStyleUseAILoader の値を false (DirectX Alpha Image Loader を使用しない) に設定しているなら何もする必要はありません。 true に設定している場合、ブラウザ判別を行って、IE7なら false に設定しなおします。
// Use DirectX Alpha Image Loader in WinIE? (boolean)
// 'true' required if images are PNG-24 and has alpha transparency channel.
// Notice : When 'true', images are no longer repeat-fill, only scale to element box size in WinIE.
// Gaps of background occurs irregularly in WinIE. limitation of using DX Alpha Image Loader?
this.richStyleUseAILoader = true;
// Edge width of rich-style popup (px)
// 'padding' property value of 'ins#AP-popup-parent.AP-richStyle' selector in 'ArekorePopup.css'
// and pixel size of images must be related with this value.
// ('0' given, popup will be filled with 'simple_background' image only.)
this.richStyleEdgeWidth = 16;
// Use DirectX Alpha Image Loader in WinIE? (boolean)
// 'true' required if images are PNG-24 and has alpha transparency channel.
// Notice : When 'true', images are no longer repeat-fill, only scale to element box size in WinIE.
// Gaps of background occurs irregularly in WinIE. limitation of using DX Alpha Image Loader?
this.richStyleUseAILoader = true;
// insert by akataka
if (window.XMLHttpRequest) {
if(document.all){
// IE7
this.richStyleUseAILoader = false;
}else{
// mozilla, safari, opera 9 ... etc
}
} else {
// IE6, older browsers
}
// Edge width of rich-style popup (px)
// 'padding' property value of 'ins#AP-popup-parent.AP-richStyle' selector in 'ArekorePopup.css'
// and pixel size of images must be related with this value.
// ('0' given, popup will be filled with 'simple_background' image only.)
this.richStyleEdgeWidth = 16;
ブラウザ判別は Detecting IE7+ in JavaScript の Abhilasha Sharma さんのコメント(2007/01/29)を利用しました。
かなりメチャクチャやっていますが、とりあえずIE7上で DirectX Alpha Image Loader を使用せずに表示されます。 → サンプル
[Top]