Home > P.339

P.339

  • Last Modified: 2008年11月30日 23:00

このページは、株式会社技術評論社より刊行されている実践 Web Standards Design に記載しているソースコードのサンプルを呈示しています。 書籍該当部分と照合しやすいように前後の解説文も掲載していますが、あくまで照合用のため、適宜前後を省いたり内容を省略したりしています。 書籍を読みながら実際にサンプルを表示する際の補助資料として活用してください。

また、 XHTML ソースと CSS ソース、関連画像を含めた全サンプルの ZIP アーカイブ (3,104,743 Bytes) もダウンロードできます。 ( ZIP アーカイブには解説文は含まれていません。)

解説

サムネール画像にマウスオーバーさせると拡大画像が表示します。 このような画像ポップアップ表示を実現する方法としては JavaScript を使うのが一般的ですが、 CSS を使って表現することも可能です。

縮小画像と拡大画像の 2 点を用意しておき、拡大画像のほうを通常時には見えない状態に、そしてマウスオーバーさせたときに目に見える状態にさせるという仕掛けを CSS の :hover 擬似クラスを使って制御します。

XHTML

<div class="photo">
  <a href="#" title="" class="popup"><img src="photo_thumbnail.jpg" alt="サムネール画像" title="サムネール" /><img src="photo_large.jpg" alt="拡大画像" title="拡大画像" class="large" /></a>
</div>

CSS

/* (1)包含ブロックに設定 */
div.photo {
  position: relative;
}

/* (2)a要素をブロック化 */
div.photo a.popup,
div.photo a.popup:visited {
  display: block;
  width: 140px;
}

/* (3)拡大画像を非表示 */
div.photo a.popup img.large {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

/* (4)IE向けの対応 */
div.photo a.popup:hover {
  background-color: #fff;
}

/* (5)マウスオーバー時に拡大画像の表示 */
div.photo a.popup:hover img.large {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 350px;
  height: 248px;
}

Download

Comments:0

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Trackbacks:0

TrackBack URL for this entry
http://lh3.jp/files/system/mtos/mt-tb.cgi/128
Listed below are links to weblogs that reference
P.339 from lh3.jp

Home > P.339

Tag Cloud
Categories
Archives
Search
Feeds
  • Feed by feedburner.jp

Return to page top