画像のマウスオーバーで、離れた位置に拡大画像を表示する

カテゴリ：CSSテクニック 2009年1月14日 23:21

前回の「CSSだけで作るマウスオーバーでの画像の拡大」の応用として作ったサンプルです。

ただ、今回は少し収穫がありました。
a:hover を使っての、a 要素内の position の操作に関する新しい発見です。

画像のマウスオーバーで、離れた位置に拡大画像を表示するデモ

http://css-eblog.com/eblog_sample/0901/css-remote-rollover/

▼EntryMore▼

さて、まずは以下のソースを見てください。

HTMLソース

<div id="imgHover">
 ここに画像を表示
 <ul id="imgHoverList">
 <li>
 <a href="#"><img src="img_sample01.png" alt="sample image" /><img src="img_sample2_01.png" alt="sample image" /></a>
 </li>
 <li>
 <a href="#"><img src="img_sample02.png" alt="sample image" /><img src="img_sample2_02.png" alt="sample image" /></a>
 </li>
 <li>
 <a href="#"><img src="img_sample03.png" alt="sample image" /><img src="img_sample2_03.png" alt="sample image" /></a>
 </li>
 <li>
 <a href="#"><img src="img_sample04.png" alt="sample image" /><img src="img_sample2_04.png" alt="sample image" /></a>
 </li>
 </ul>
 </div>

CSSソース

#imgHover {
          position: relative;
          margin-top: 50px;
          width: 710px;
        }
        #imgHover #imgFrame {
          border: solid 3px #999;
          position: absolute;
          right: 0;
          top: 0;
          line-height: 124px;
          text-align: center;
          width: 200px !important;
          width: 206px;
          height: 124px !important;
          height: 130px;
        }
        #imgHover #imgHoverList {
          list-style: none;
          position: relative;
        }
        #imgHover ul li {
          float: left;
          margin-right: 5px;
        }
        #imgHover ul li img {
          border: none;
        }
        #imgHover ul li a {
          display: block;
        }
        #imgHover ul li a:hover {
          position: static;
        }
        #imgHover ul li a .mainImage {
          display: none;
        }
        #imgHover ul li a:hover .mainImage {
          display: block;
          position: absolute;
          top: 3px;
          left: 507px !important;
          left: 83px;
        }

テクニック詳細

今回のサンプルの肝になるのは、a:hover の使い方です。
そもそも、:hover 自体は a タグ以外にも本来は使えるのですが、IE では正常に動作しないので a 要素でマークアップしています。

まず、離れた箇所に表示したい画像と、それのサムネイル画像を用意します。（サンプルでは 4 つ）

サンプルでは ul でマークアップしていますが、別にここは ul でなくても構いません。
問題となるのは、a タグ部分です。
この a タグの中にサムネイル用の画像と、離れた場所に表示したい画像のふたつを入れます。

そのあとで、離れた場所に表示する画像を非表示にします。（サンプルでは#imgHover ul li a .mainImageのdisplay: none;）
こうすることで、サムネイル画像だけが画面に表示されることになります。

そしてここからが重要かつ新発見したところです。
通常時は非表示になっている画像を、a タグにマウスオーバーしたときに表示されるギミックを実装します。

手順としては

#imgHover ul li a:hover に position: static; を指定すること。
#imgHover ul li a:hover .mainImage に display: block; を指定して表示させること。

の 2 点になります。
それ以外に大事な点としては、全体をくくっている div 要素（#imgHover）にposition: relative;を、#imgHover ul li a:hover .mainImageにposition: absolute;を指定します。

こうすることで、#imgHover が絶対配置の基準となります。
それ以外にも細かい指定がありますが、表示位置の部分なので説明は割愛します。（環境に応じて適宜変更してみてください）

ここまでで、マウスオーバーした際に画像が表示されるようになります。
さらに、全体をくくっている div 要素を基準としたことで、div 要素を基準とした、a タグから離れた場所にも画像を表示することが可能です。

新発見したこと

さて、ここからが新発見した部分です。
手順 1 の #imgHover ul li a:hover に position: static; を指定するがそうです。

これを指定しないと、IE ではマウスオーバーしても画像が表示されません。
さらに、a:hover に指定するプロパティは hasLayout が適用されるプロパティでなければなりません。（例えば、height や zoom など）

ただ今回の場合、zoom などを使ってしまうとなぜかliに指定している float が崩れたため、「position: static;」を利用しています。
元々これを指定しなくても、a 要素のデフォルトは static なので意味のない指定になっていますが、これを適用することで float に影響を与えることなく、マウスオーバーでの画像表示が可能となるため、意味のない（影響のない）プロパティを指定して、今回のサンプルを実現しています。

またこのa:hoverに指定するプロパティですが、前回のエントリーでは a:hover にposition: relative;を指定していましたが、これも同様の理由からです。
さらに前回のサンプルでは、IE7 にも問題が発生し、後続するサムネイル画像の下に、拡大された画像がもぐりこんでしまう、という不具合の回避方法として上記プロパティを指定していました。

今回のケース以外でも、マウスオーバーによるアクションを作った際、下にもぐりこんでしまうような場合に、同じような指定をすることで改善される可能性があります。ぜひ、参考にしてみてください。

合わせて読むと役に立つかもなエントリー

この記事のカテゴリー一覧を見る⇒CSSテクニック

パーマリンク
コメント(7)
トラックバック(0)

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/114

1 - larkman さん

どうもです、ページ記事とは関係無いのですけど23日前から、えどさんのサイトに不具合があるようです。n

2009年1月17日 12:11

2 - えどさん

>>1 - larkman さんどもです。nえ！不具合ですか・・？nどこらへんがおかしくなってますか・・？(;´д｀)

2009年1月17日 12:26

3 - larkman さん

Firefoxで何時も、見ているのですけど最近、「このページのスクリプトは処理に時間がかかっているか応答しなくなっています。今すぐスクリプトを停止するか、このまま処理を続行させるか選択してください。」と表示しますnで。。。今なんですけど、IEで、えどさんのサイト見ると、普通に見れます。n

2009年1月17日 14:39

4 - えどさん

>>3 - larkman さんご報告ありがとうございます！nどうやら、jQueryが悪さをしていたようです；n別のverのものに入れ替えたらスクリプトの停止は起きなくなりました。n最近、もっぱらメインはGoogle Chromeなので、nこの現象に気づいていませんでした(;´д｀)不具合を教えていただき助かりましたー！

2009年1月17日 16:26

5 - ともこさん

プルダウンメニューと共に使わせて頂きました。カオスなＣＳＳを書き散らしながら何とかサイトを作っているような者ですが、そんな私がいじっても動作してくれる、とても有り難い記述です(*´_｀*)ありがとうございました。

2011年10月11日 16:26

6 - Kou さん

マウスオーバーの機能で
ようやく納得の行く情報にたどり着けました。
ありがとうございました！

2011年12月 8日 12:41

7 - えどさん

>>Kouさん
コメントありがとうございます！
お役に立てたようでよかったです( *'▽')

2011年12月 8日 13:29