このページはCSSのみでリンク先サイトのサムネイル画像をポップアップ表示させる、ポップアップリンク集のサンプルページです。
表示確認は以下の環境で行っております。
CSSを用いた画像置換の応用でポップアップ画像を実現しています。
ポイントとなる部分は数箇所しかありません。
まず、通常時とマウスオーバー時でそれぞれvisibilityの値にhiddenとvisibleを指定してやること、さらに画像置換の常套手段として、「text-indent:-10000px」としておくことです。
ただし注意点として、「a:hover」に対して必ず背景指定をしておきます。
これがないとうまくポップアップ表示してくれません。
それぞれリンク先によって違う画像を表示させるためには、<span>タグにクラス名かID名を付けて区別してやればOKです。
概要でも述べましたが、「a:hover」に対する背景指定をしないと、ポップアップそのものが表示されなくなります。
必ず指定するようにして下さい。
また、ポップアップ画像はオンマウス時に読み込み始めるので、あまりサイズの大きな画像を使うと表示されるまでにタイムラグが生じることがあります。
今回、サイトのサムネイル画像を表示させるために、サイトサムネイルの自動生成サービスのSimple APIを利用しました。
また、ブロック化したspan要素のサイズは、画像サイズと同じにして下さい。
ポップアップ表示位置も、positionでtopやleftを調整することで、自由に行えます。
もしもうまくいかない場合はz-indexでレイヤーの重なりを調整するなどしてみて下さい。
ちなみに、ポップアップ用のスタイルシートを無効にすると、以下のように表示されます。
このことを考慮して、<span>タグ内に記述するのはリンク先URLなど、スタイルシート無効時でも差し支えのない内容か、 （半角スペース）などにしておくと良いと思います。
作成日:2006/7/1(Sat）
Copyright © 2006 よしゆき All Rights Reserved.