1yard:CSSによる画像ポップアップ

April 08, 2006

CSSによる画像ポップアップ

Lightbox JSとか前々から試してみたいと思ってたんですが、JavascriptをFTPでアップしたりとか、ちょっとウザ。

そういや、CSSで画像ポップアップをやってるサイトが、はてブで人気エントリになってたなあとか思ってたら、

SEO業者ですら感動する驚異のCSSテクニック - 不定期更新 SEOコラム

CSSだけでLightbox.JSを再現したサイトを紹介してるだけで、問題のCSSに関して詳しく解説してる訳でもない。

でも、結局これって、Lucky bag::blogのe-luckさんがやってたことと同じなのかな。

Lucky bag::blog: CSS で画像ポップアップ

JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法「CSS ~ Image Pop UP」を参考に、拡大画像をその場で表示させるサンプルを作ってみた。

最初は拡大された画像を1px×1pxで飛ばしておいて、マウスオーバーでオリジナルサイズを表示させる、てな感じ？

CSSに追加するクラスは以下。

img {
border: none;
}
.photo {
position: relative;
top: 0;
left: 0;
width: 100px;
}
.photo a .large {
display: block;
position: absolute;
width: 1px;
height: 1px;
top: 0;
left: 0;
}
.photo a.popup,
.photo a.popup:visited {
display: block;
width: 100px;
top: 0;
left: 0;
}
.photo a.popup:hover {
background-color: 背景色;
}
.photo a.popup:hover .large {
display: block;
position: absolute;
width: 拡大時に表示するサイズ;
height: 拡大時に表示するサイズ;
top: 0;
left: 0;
}

※　Lucky bag::blog: :CSS で画像ポップアップのCSS設定を一部改変しています。下記のhtmlの記述も同様です。

「.photo」と「.photo a.popup:hover」は各々、マウスオーバーしていないとき、しているときのサムネイル画像の設定。
「.photo a .large」と「.photo a.popup:hover .large」は、これも各々マウスオーバーしていないとき、しているときの拡大画像の設定。
拡大画像は通常状態のとき1px×1pxになってるけど、サムネイルはマウスオーバーのときに1px×1pxになってる訳ですね。
「.photo a.popup」及び「.photo a.popup:visited」は、マウスを戻したときの設定（？）。

で、このときに画像を以下のように記述。

<div class="photo">
<a href="#" title="" class="popup"><img src="サムネイル画像のURL" width="xxx" height="xxx" alt="サムネイル画像" title="サムネイル" /><img src="拡大画像のURL" width="XXX" height="XXX" alt="拡大画像" title="拡大画像" class="large" /></a></div>

上述で「width="XXX" height="XXX"」とした拡大画像のサイズは、CSSの「.photo a.popup:hover .large」に指定したサイズと同様でないといけないようです。

以上を踏まえてCSSにクラスの追加した後、試しにアップしてみたのがこちら。