[ thyna ] >
[ ]
Fri - October 8, 2004
あれこれポップアップとPNG画像のこと
HTML中にある<a>タグのtitle属性は通常その文字列だけを表示するのですが、一部のサイトでSafariでリンクをドラッグした時のように半透明のオブジェクト（しかも画像付き！）を実現していたのはこのシステム。
組み込みは簡単、ありみかさとみさんのサイト「娘娘飯店しるきぃうぇぶ」の「あれこれポップアップ」ページから「持ち帰り用アーカイブをダウンロード」して、自分のサイトのjs、css宣言部分に追記するだけです。
iBlogでのテンプレートファイルへの記述は
こんな感じで。すでに使っているcss宣言がある場合も、別に書き換えたり追記したりする必要はなく、従来の宣言と併記すれば問題ナシです。
実験：
ここにマウスカーソルを当てて下さい。
js、cssを正しくを組み込んだ状態で上記の表記をするためのソースはこうなります（タグの表記は例による）。
ハテ、iBlogを使っている場合、ここで問題が。ハイパーリンクを埋め込むウインドウには［target］属性に対するチェックしかありません。あれこれポップアップが独自に拡張している［ap:banner］属性（ポップアップに表示する画像のuli）は当然として、［title］を埋め込む事もできません。
そんな場合、ハイパーリンクを埋め込むウィンドウには以下のように記述します。
最初と最後には［”］（ダブルクォーテーション）がないのに注意。
こう記述したものが展開される事で［＜a href=”］と［" target="NewWindow"＞］にはさまれて、上記の通り表示されるようになります。
iBloggerもこれで簡単導入です！表示する内容や制御時間などのカスタマイズもできるので、興味ある方は導入してはいかがでしょう？
■■■■■■■■
さて。この半透明にはPNG-24のアルファチャンネルを使用しているそうです。PNG画像は２種類あって、透明色が１色だけのPNG-8、アルファチャンネルにも濃度が使用できるPNG-24。あれこれポップアップで使用しているので、これとは別にテーブルタグの背景画像にアルファチャンネルを指定した画像を敷き詰めて動作したものを動作確認したところ…
WindowsのInternet Explorerだと半透明画像がまったく表示されねぇ（謎
いろいろ調べてみると、こういう事だそうで。
どうもIE自体の対応がおかしいって事らしい（涙 しかもAlphaImageLoaderを利用するとなると、かなり面倒くさい（記述が、じゃなくてIEに対応しようとする事で他ブラウザでの表示に不具合が発生する可能性があるので、ブラウザ判定をして分岐…という検証の問題）WindowsでもGecko系とか使えば平気なんだって。う～ん。
そういえば、あれこれポップアップ（AlphaImageLoaderによる表示は対応している）でも稀に表示や文字色がおかしくなってる事があるんだよねぇ…他ブラウザだと問題ないのも確認済み。条件は特定できず、まともに表示できている事もあるのです。これは致命的な事にはならないから、「WinIEでのリッチスタイルポップアップの表示状況に関して」にあるように［WinIE なんて腐ったブラウザの事なんか知るか、窓から捨てろ、俺はマジョリティには屈しない！と叫ぶ。］事にしていますが。
ただ、ここのアクセスログを見ると、やはりWinIEが一番多いのです。よって、このサイトに（あれこれポップアップ以外の）半透明PNGを適用するのはちょいと無理そうね…。使いたい箇所もあるんだけども。
iBlogでのテンプレートファイルへの記述は
<link href="<$BlogBaseURL$>ArekorePopup.css" type="text/css" rel="stylesheet" />
<script src="<$BlogBaseURL$>ArekorePopup.js" type="text/javascript"></script>
こんな感じで。すでに使っているcss宣言がある場合も、別に書き換えたり追記したりする必要はなく、従来の宣言と併記すれば問題ナシです。
実験：
ここにマウスカーソルを当てて下さい。
js、cssを正しくを組み込んだ状態で上記の表記をするためのソースはこうなります（タグの表記は例による）。
＜a href="http://takuyah.x0.com/"
title="Takuya Hanaoka presents Yomoyama Nikki ADVANCE"
ap:banner="http://takuyah.x0.com/nav_img/blog.gif"
target="NewWindow"＞
ここにマウスカーソルを当てて下さい。＜/a＞
ハテ、iBlogを使っている場合、ここで問題が。ハイパーリンクを埋め込むウインドウには［target］属性に対するチェックしかありません。あれこれポップアップが独自に拡張している［ap:banner］属性（ポップアップに表示する画像のuli）は当然として、［title］を埋め込む事もできません。
そんな場合、ハイパーリンクを埋め込むウィンドウには以下のように記述します。
http://takuyah.x0.com/" title="Takuya Hanaoka presents Yomoyama Nikki ADVANCE" ap:banner="http://takuyah.x0.com/nav_img/blog.gif
最初と最後には［”］（ダブルクォーテーション）がないのに注意。
こう記述したものが展開される事で［＜a href=”］と［" target="NewWindow"＞］にはさまれて、上記の通り表示されるようになります。
iBloggerもこれで簡単導入です！表示する内容や制御時間などのカスタマイズもできるので、興味ある方は導入してはいかがでしょう？
■■■■■■■■
さて。この半透明にはPNG-24のアルファチャンネルを使用しているそうです。PNG画像は２種類あって、透明色が１色だけのPNG-8、アルファチャンネルにも濃度が使用できるPNG-24。あれこれポップアップで使用しているので、これとは別にテーブルタグの背景画像にアルファチャンネルを指定した画像を敷き詰めて動作したものを動作確認したところ…
WindowsのInternet Explorerだと半透明画像がまったく表示されねぇ（謎
いろいろ調べてみると、こういう事だそうで。
WinIEで半透明PNGを使う
http://piroblog.pirosy.com/C1929643575/E2065107963/
αチャンネルを持ったPNG画像の透過
http://write-off.cside.com/scripts/css/alphapng.htm
AlphaImageLoaderフィルター
http://write-off.cside.com/scripts/css/alphapng.htm
どうもIE自体の対応がおかしいって事らしい（涙 しかもAlphaImageLoaderを利用するとなると、かなり面倒くさい（記述が、じゃなくてIEに対応しようとする事で他ブラウザでの表示に不具合が発生する可能性があるので、ブラウザ判定をして分岐…という検証の問題）WindowsでもGecko系とか使えば平気なんだって。う～ん。
そういえば、あれこれポップアップ（AlphaImageLoaderによる表示は対応している）でも稀に表示や文字色がおかしくなってる事があるんだよねぇ…他ブラウザだと問題ないのも確認済み。条件は特定できず、まともに表示できている事もあるのです。これは致命的な事にはならないから、「WinIEでのリッチスタイルポップアップの表示状況に関して」にあるように［WinIE なんて腐ったブラウザの事なんか知るか、窓から捨てろ、俺はマジョリティには屈しない！と叫ぶ。］事にしていますが。
ただ、ここのアクセスログを見ると、やはりWinIEが一番多いのです。よって、このサイトに（あれこれポップアップ以外の）半透明PNGを適用するのはちょいと無理そうね…。使いたい箇所もあるんだけども。