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にクラスの追加した後、試しにアップしてみたのがこちら。

サムネイル画像
IEとFirefoxでは確認しましたが、キチンと表示されてる?



ちょっとデカ過ぎたね>画像(笑)


表示も早いし仲々面白い効果が得られますが、拡大画像のサイズが固定されてしまうのが玉に瑕。CSSイジくったりと結局は手間だし。

てか、相変わらず、基本からじゃなくて、こういう飛び道具に喰い付いてしまうところが、僕の性格をあらわしているというか…


daddyscar at 21:16   このエントリーを含むはてなブックマーク   この記事をクリップ! Comments(0)TrackBack(0)blog |   customize Edit

トラックバックURL

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔   
 
 
 
Profile
daddyscar




紹介するほど
自己確立してないし
まあ、ただの日記なんだけど
それでだけ終わるのも
能がないっていうか
パラノ体質が許さないってか

で、一応ゲイなんですが
それに限らず色々書いてきます
でも、やっぱゲイであることから
離れることは出来ないかも



RSSを登録


Archives
Recommend

Mr.インクレディブル



Strangeways, Here We Come



伝奇集



ファントム・オブ・パラダイス



Watchmen



Mahler: Symphony No.9



デッドゾーン デラックス版



デビルマン (2)



The Stone Roses



IT〈1〉



Mixed Up



ブルーベルベット



半神



Slow Motion World of Snowpony



祈りの海



Loveless



ウィチャリー家の女



ティ-ンエイジャ-・オブ・ジ・イヤ-



戦闘妖精・雪風(改)



The Buried Life



密閉教室



Roxy Music



虚空の眼