1yard:CSSによる画像ポップアップ1yardSFとミステリとロックとその他もろもろ。実はそのもろもろの中身が重要。JSとか前々から試してみたいと思ってたんですが、JavascriptをFTPでアップしたりとか、ちょっとウザ。SEOコラムCSSだけでLightbox.JSを再現したサイトを紹介してるだけで、問題のCSSに関して詳しく解説してる訳でもない。bag::blogのe-luckさんがやってたことと同じなのかな。UP」を参考に、拡大画像をその場で表示させるサンプルを作ってみた。最初は拡大された画像を1px×1pxで飛ばしておいて、マウスオーバーでオリジナルサイズを表示させる、てな感じ?CSSに追加するクラスは以下。画像ポップアップのCSS設定を一部改変しています。下記のhtmlの記述も同様です。a.popup:hover」は各々、マウスオーバーしていないとき、しているときのサムネイル画像の設定。.large」は、これも各々マウスオーバーしていないとき、しているときの拡大画像の設定。拡大画像は通常状態のとき1px×1pxになってるけど、サムネイルはマウスオーバーのときに1px×1pxになってる訳ですね。a.popup:visited」は、マウスを戻したときの設定(?)。このときに画像を以下のように記述。.large」に指定したサイズと同様でないといけないようです。以上を踏まえてCSSにクラスの追加した後、試しにアップしてみたのがこちら。IEとFirefoxでは確認しましたが、キチンと表示されてる?ちょっとデカ過ぎたね>画像(笑)表示も早いし仲々面白い効果が得られますが、拡大画像のサイズが固定されてしまうのが玉に瑕。CSSイジくったりと結局は手間だし。Comments「最新トラックバック」は提供を終了しました。exodus'05GBrゲトラバ!。