JavaScript: August 2008アーカイブ

Coda Popup BubblesはjQueryを利用した、ふわっとした吹き出しを表示するJava Scriptです。

試しに、自分のサイトのトップページに設置してみました。

• 設置サイト: fuku-chang.com
• 参照サイト: Coda Bubble Example

Java Scriptは当然ながらそのまま拝借し、吹き出しのimageファイルも頂いてみたのですが、少々問題があったため、imageファイルは作成し直しております。

オリジナルのimageファイルはアルファチャネルを含むPING形式で作成されており、ドロップシャドウ部分が透過されています。まず、FF3では問題ありません(図1)。ところが、この透過部分の表示がIE7で上手くいかず、真っ黒に表示されてしまいます(図2)。

IE7はアルファチャネルを含む透過PING形式をサポートするようになっており、そのまま表示する分には当然問題ありません。擬似的にポップアップのレイヤー表示ではなく、そのままimageファイルを配置したら、正常に表示されます(図3)。そこで試しに、透過されたブラックシャドウ部分を消去して、吹き出しのラウンドやとんがり部分のみ透過させたimageファイルに作り替えると、吹き出しのラウンド部分等が綺麗に表示されます(図4)。
どうも、レイヤー表示した場合、アルファチャネルのうち、何のデータもない箇所は問題ないが、「うっすらと透かしたデータ」は上手く表示できないのかもしれません。

結局、IE7でも綺麗に表示するため、吹き出しのラウンドやとんがり部分は透過させて、透過させないベタなドロップシャドウを付けたimageファイルを作成して、吹き出しを表示することにしました(図5)。