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 で画像ポップアップ
最初は拡大された画像を1px×1pxで飛ばしておいて、マウスオーバーでオリジナルサイズを表示させる、てな感じ?
CSSに追加するクラスは以下。
「.photo」と「.photo a.popup:hover」は各々、マウスオーバーしていないとき、しているときのサムネイル画像の設定。
「.photo a .large」と「.photo a.popup:hover .large」は、これも各々マウスオーバーしていないとき、しているときの拡大画像の設定。
拡大画像は通常状態のとき1px×1pxになってるけど、サムネイルはマウスオーバーのときに1px×1pxになってる訳ですね。
「.photo a.popup」及び「.photo a.popup:visited」は、マウスを戻したときの設定(?)。
で、このときに画像を以下のように記述。
上述で「width="XXX" height="XXX"」とした拡大画像のサイズは、CSSの「.photo a.popup:hover .large」に指定したサイズと同様でないといけないようです。
以上を踏まえてCSSにクラスの追加した後、試しにアップしてみたのがこちら。
ちょっとデカ過ぎたね>画像(笑)
表示も早いし仲々面白い効果が得られますが、拡大画像のサイズが固定されてしまうのが玉に瑕。CSSイジくったりと結局は手間だし。
てか、相変わらず、基本からじゃなくて、こういう飛び道具に喰い付いてしまうところが、僕の性格をあらわしているというか…
そういや、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 {※ Lucky bag::blog: :CSS で画像ポップアップのCSS設定を一部改変しています。下記のhtmlの記述も同様です。
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;
}
「.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にクラスの追加した後、試しにアップしてみたのがこちら。
IEとFirefoxでは確認しましたが、キチンと表示されてる?
ちょっとデカ過ぎたね>画像(笑)
表示も早いし仲々面白い効果が得られますが、拡大画像のサイズが固定されてしまうのが玉に瑕。CSSイジくったりと結局は手間だし。
てか、相変わらず、基本からじゃなくて、こういう飛び道具に喰い付いてしまうところが、僕の性格をあらわしているというか…