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

個別記事

前後の記事

CSS で画像ポップアップ

この記事が属するカテゴリー: CSS

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

popup.html

最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover で正寸を指定させることによって実現させている。ちなみに、hover の指定に背景色を指定しないと IE でうまく動作しない。

.photo a.popup:hover {
        background-color: #fff;
}

何となく微妙な感じだけど、サムネールをいっぱい並べて画面遷移なしで拡大画像をみせたい場合に使えるかも。

2005-06-09T19:52:10+09:00 | コメント (2) | トラックバック (16) |

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:: http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/245

このリストは、次のエントリーを参照しています: CSS で画像ポップアップ:

あの頃のように… さんからのトラックバック: CSS で画像ポップアップさせる; CSS で画像ポップアップ私の中ではかなりの革命です。なぜ今までこれに気が付かなかったのか。きっとIEのhoverに対する実装が甘かったせいかもしれません。なに... [続きを読む]; 2005年06月10日 19:02

いつでもどこでも〜まったりん〜さんからのトラックバック: CSSで画像を拡大; CSS(カスケーディング・スタイル・シート)で画像を拡大ポップアップ(したかのように)見せる技があるそうだ。画像の上にマウスポインタを置くだけでよい。こ... [続きを読む]; 2005年06月17日 02:01

あのにらぼrev.2 さんからのトラックバック: CSSだけで画像ポップアップ; JavaScriptを使わずにCSSだけで画像ポップアップできるらしい。HTMLソース見てみると目から鱗でした。これカーソルを乗せたときに表示する内容を変更する... [続きを読む]; 2005年06月17日 10:41

a i r t r a i n さんからのトラックバック: [web]Lucky bag::blog: CSS で画像ポップアップ; 驚愕！上記サイトを参考に（というかまんま持ってきて若干簡略化しただけですが…）。よくこんなん思いつくなぁ。こんなことができるとは思わなかった。（[http://... [続きを読む]; 2005年06月17日 15:19

PukiWiki/TrackBack 0.1 さんからのトラックバック: Web Design; Web Design Project 2005 情報統計部では他の神戸大学のクラブ・サークルに対してウェブサイト製作についての相談を請け負っています。ホ... [続きを読む]; 2005年06月17日 18:50

じっぷろぐさんからのトラックバック: CSS で画像ポップアップ; http://www.lucky-bag.com/archives/2005/06/css_popup.html サムネイル画像にマウスオーバーしたときに拡大... [続きを読む]; 2005年06月18日 12:30

trashcan+green (beta) さんからのトラックバック: [web]「CSSで画像ポップアップ」を画像1枚でやってみる; http://www.lucky-bag.com/archives/2005/06/css_popup.html a要素にしか:hoverが効かないIE用に... [続きを読む]; 2005年06月19日 01:25

Super::User さんからのトラックバック: スタイルシートでイメージポップアップ; スタイルシートでこんな事が出来るシリーズその2 http://moneytreesystems... [続きを読む]; 2005年06月20日 16:38

月刊葉月日記さんからのトラックバック: CSS で画像ポップアップ; Lucky bag::blog: CSS で画像ポップアップ　目から鱗って奴で... [続きを読む]; 2005年06月29日 21:24

テクなしBLOG さんからのトラックバック: CSSで画像をポップアップさせてみる; Javascriptなんかを使わずに、画像をポップアップっぽくみせる方法。 ... [続きを読む]; 2005年07月03日 14:24

Ceekz Logs さんからのトラックバック: マウスオーバーで拡大; 1週間ほど前から、右下に日記に乗せた画像を表示するようにしていたのですが、この度、マウスオーバーで画像を拡大表示するようになりました。単に、マウスを当てると... [続きを読む]; 2005年09月19日 03:05

贋SEの現実逃避さんからのトラックバック: ブログカスタマイズ＠試行錯誤; そろそろ自分でブログデザインをしたくなってきたので、ちょこちょこいじってみることに･･･。 †カスタマイズしやすそうなテンプレートを選ぶ。 3カラムでシ... [続きを読む]; 2005年10月16日 12:55

peaceman1984の日記さんからのトラックバック: [日記]「はてな」はやっぱりすごい会社だ。; 　こっそりと文句を言ったからかどうかは知らないけど、はてなカウンターが前と同じく月ごとのアクセス数も解析できるようになってた。やっぱりはてなの技術力はスゲ... [続きを読む]; 2005年12月10日 22:17

あまなつ日記さんからのトラックバック: リンクテキストから画像がポップアップするAdhoverをはじめます; 以前からテキストでAmazonの商品を紹介するようにもしたいなぁと考えてまして、... [続きを読む]; 2006年02月15日 20:42

1yard さんからのトラックバック: CSSによる画像ポップアップ; Lightbox JSとか前々から試してみたいと思ってたんですが、JavascriptをFTPでアップしたりとか、ちょっとウザ。そういや、CSSで... [続きを読む]; 2006年04月08日 21:15

パソコンのツボ ~Office のTIP さんからのトラックバック: CSSで画像のポップアップ; CSSでポップアップ。こんな方法もあったんだ？と思いつつさっそく、JavaScriptから乗り換えようかと．．． [続きを読む]; 2006年06月02日 13:24

コメント

rara さんからのコメント: 自分でもやってみました。ただ画像を複数横に並べたいのとあと重なった時に下の画像が見えてしまうのですが・・・; 2006年03月01日 17:48

e-luck さんからのコメント: 複数並べると言うことであれば、下記の所を参考にしてみてはいかがでしょうか。
http://host.sonspring.com/hoverbox/; 2006年03月02日 12:44

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を < 、> を > とそれぞれ置き換えてください。