hail2u.net

ジャケット画像のポップアップ #2

Posted at 2005-08-18T17:29:00+09:00 in Web Design

昔書いたジャケット画像のポップアップは、今も愛用していたりするわけですが、デカイ画像をブラウザに拡大・縮小してもらってたりするので微妙に汚かったりとかします。:hover擬似クラスを適用する要素を工夫すると、小さい画像と大きい画像を切り替えてポップアップさせることが出来たりしました。

動作サンプルでマウスを画像に乗っけてやれば安定した画像(=Amazon提供のサムネイル・サイズと中サイズの画像)でポップアップしてくれるのがわかると思います。

元となるHTMLコードは、

<ul>
  <li>
    <ul>
      <li class="small"><img src="{小さい画像のURL}" ... /><li>
      <li class="medium"><img src="{大きな画像のURL}" ... /></li>
    </ul>
  </li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

という様な、小さい画像と大きい画像を組にしたul要素をul要素でリスト化したものです。CSSコードは、

ul li ul {
  margin: 0;
  padding: 0;
  width: 77px;
  height: 77px;
  list-style-type: none;
}

ul li ul li.small {
  display: block;
}

ul li ul li.medium {
  display: none;
}

ul li ul:hover li.small {
  display: none;
}

ul li ul:hover li.medium {
  display: block;
  position: relative;
  top: -43px;
  left: -43px;
}

という様な感じ。無駄に複雑ですが、なんとなくわかるんじゃないかと(適当すぎ)。まず、小さい画像と大きい画像を組にしたul要素を縦横を小さい画像の大きさで決め打ちします。通常はサムネイルで表示したいので、小さい画像を格納しているli.smallをdisplay: block;、大きい画像を格納しているli.mediumをdisplay: none;としてやります。マウスが乗っかったらポップアップさせたいので、上記displayの値をひっくり返してやります。ここで、:hover擬似クラスを小さい画像と大きい画像を組にしたul要素に指定してやるのがポイント。このままではポップアップにならないので、以前のエントリと同じ様にposition: relative;を使ってポップアップらしくしてやって終了。

ul要素に:hover擬似クラスを適用していたりするので、Internet Explorer 6(もちろん5とかも)なんかではポップアップしません。Opera 8では概ね動いている感じですが、ポップアップを手前に持ってくるのがうまくいかないです(あんまり考えてないけど)。Firefoxでは完璧！愛してる！

ロール・オーバーにも応用できそう。あんまり意味なさそうだけど。