javascriptを使いリンク先のサムネイルを表示させる方法と、IE6以下でも透過PNGを使用する方法を見つけたので紹介。
まずはサムネイルの表示方法から。以下の文章はPHPSPOT開発日誌様の文章を引用しています。
- previewbubble.zip をダウンロード
- previewbubble.js の var bubbleImagePath = '/images/bg.png'; の画像パスをあわせる
- <script type="text/javascript" src="previewbubble.js"></script> でJS読み込み
- class に previewlink を付与 <a class="previewlink" href="http://www.cnn.com">CNN</a>
これだけで、サムネイルの表示が可能（このアプリケーションがサムネイルを保持している必要がありますが）です。ソースもほとんど手を加えなくて済むのでラクチンです。
続いて透過PNG。以下の文章はデザインウォーカー様から引用しています。
- iepngfix.jsっちゅうスクリプトをダウンロードしてサーバにアップロード（右クリックで対象を保存で。）
- 透過PNG画像を表示したいhtmlの<head>から</head>の間に
<script language="JavaScript" type="text/javascript" src="iepngfix.js"></script>
って書いてiepngfix.jsを読み込みます。- CSS（スタイルシート）でPNGファイルをバックグラウンド指定してるクラスやIDに以下の一行を追加。
* html .iepngfix { behavior: expression(IEPNGFIX.fix(this)); }
（.iepngfixの部分はPNG画像を指定したクラス名、もしくはID名を指定）
* はIE6、5用のCSSハックですね。これでIE6、5でposition:fixedが使えれば最強なんだけどなぁ。ちなみにこれらのスクリプトはIE6、5にのみ適用すればいいので、条件分岐コメントを使用しても良いかと思います。
ちなみに、サムネイル表示はリンクページで実践済みなので是非ご覧下さい。
--追記--
これらのテクニックはIE5.01では使用できないみたいです。IE6とIE5.5のみ適用されます。透過PNGのほうも試してみたので紹介。
まず黒地の背景に透過PNGを普通に置いた場合。
FireFox、opera、IE7で見ると画像が透けて黒地の背景が見えますが、IE6、IE5.5では背景部分がグレーになっているかと思います。
次に上記ライブラリを使用した場合。
IE6、IE5でも画像が透けて見えるようになったかと思います。
最後に上記ライブラリを使用し、背景を白地にした場合。
画像は同じものを使用しているのにもかかわらず、見た目が異なることがわかります。
これでデザインのバリエーションが増えること間違い無しですね。
※このライブラリはposition:absoluteそれに加えてbackgroundと組み合わせると色々と問題が発生するので注意！
↑単純にIEがpositionとbackgroundの組み合わせに不具合があるだけなのかも知れないので一旦保留。検証する時間が無いので申し訳ないです。
コメント(1)
twitterでつぶやく
iepngfix.jsをご紹介頂きありがとうございます。
＞※このライブラリはposition:absoluteそれに加えてbackgroundと組み合わせると色々と問題が発生するので注意！
この一文に今まで気が付きませんでした。
参考にどのような問題が発生したのか教えて頂けないでしょうか。
よろしくお願い致します。