画像ポップアップリンク

スクリプト不要、CSSのみでテキストリンクにポップアップ画像を表示させてみようと思います。

例えばサイトのリンク集ページ等で、リンク先のサイトがどんなサイトなのかを前もって知っておけるようにすると、クリックに対する不安は軽減すると思います。

また、文章で説明するよりも、サムネイル画像の方がイメージしやすく、わかりやすい場合もあると思います。

まず(X)HTMLに以下のように記述していきます。

1. <dl>
2. <dt>検索・ポータルサイト</dt>
3. <dd><a href="http://www.yahoo.co.jp/" title="Yahoo! JAPAN">Yahoo! JAPAN<span class="yahoo">(http://www.yahoo.co.jp/)</span></a></dd>
4. <dd><a href="http://www.google.co.jp/" title="Google">Google<span class="google">(http://www.google.co.jp/)</span></a></dd>
5. <dt>ブログ</dt>
6. <dd><a href="http://wemolog.blog61.fc2.com/" title="WeMo">WeMo<span class="wemo">(http://wemolog.blog61.fc2.com/)</span></a></dd>
7. <dd><a href="http://yoshiyukinet.blog10.fc2.com/" title="よしゆき.blog">よしゆき.blog<span class="yoshiyukiblog">(http://yoshiyukinet.blog10.fc2.com/)</span></a></dd>
8. </dl>

特別なことはあまりしていません。
ポイントとしては、強調部分で示した通り、<span>タグで囲った部分のみです。

その他は、別にサンプルコードのように<dl>タグでなくても、見出しタグ（<h1>〜<h6>）と<ul>タグを使ってもいいですし、好きなようにマークアップして大丈夫です。

また、<span>タグの中身も、別にリンク先URLである必要はありません。
サンプル内で後述しますが、文字列は別の物でもかまいません。

後はこれに対してCSSでいくつか指定してやればオーケーです。

1. dd a { position: relative; }
3. dd a span {
4.     display: block;
5.     visibility: hidden;
6.     width: 128px;
7.     height: 128px;
8.     position: absolute;
9.     top: -130px;
10.     left: 30px;
11. }
13. dd a:hover { background: #fff; }    /* この指定を抜かすとうまくポップアップされません */
15. dd a:hover span {
16.     visibility: visible;
17.     text-indent: -10000px;
18. }
20. span.yahoo { background: url(画像パス); }
21. span.google { background: url(画像パス); }
22. span.wemo { background: url(画像パス); }
23. span.yoshiyukiblog { background: url(画像パス); }

まずa要素に対する「position:relative」ですが、これはポップアップ画像の表示位置を絶対指定する為に、a要素がその基準位置となるよう指定しています。

「visibility:hidden」と「visibility:visible」はテキストリンクに対してオンマウスか否かで表示・非表示を切り替える為の指定です。

a:hoverに対する背景指定ですが、これがないとポップアップ表示そのものがされなくなります。
ただし#fff（白色）である必要はないので、ページ背景色等と併せて指定してもらえば大丈夫です。

最後に「text-indext:-10000px」ですが、これは画像置換の常套手段で、これも大きなマイナス値であればサンプル通りである必要はありません。
（インデントを大きなマイナス値にすることで、テキストを画面外に飛ばしています）

実際の表示と詳細については、ポップアップリンク集サンプルをご覧下さい。

また、今回のサンプルにはサイトサムネイルの自動生成サービスのSimple APIを利用させて頂きました。