<< 子孫セレクタについて | main | 画像のポップアップを行う その2 - Javascript + CSS 編 >>

スポンサーサイト

  • 2008.11.11 Tuesday
  • -
  • -
  • -
  • -
  • by スポンサードリンク

一定期間更新がないため広告を表示しています


画像のポップアップを行う その1 - CSS 編

Javascriptを使わず、cssだけで画像のポップアップを行う方法です。
すごく手軽に気軽にできます。

今回は「a:hover」を利用します。
マウスをのせるとリンクテキストの色が変わったりする時の設定に使うアレです。
さらに、子孫セレクタを使い、限定された時にのみ発動させます。

子孫セレクタについては、先日説明しましたので、参考にしてください。

まず、サムネイル用の小さい画像と、拡大用の大きい画像を用意して設置してください。
そして、css部分に以下のcssを記入します。

css側の記述
img {border: none;}
.popimg {position: relative;top: 0;left: 0;width: 100px;margin: 0px;}
.popimg a .large {display: block;position: absolute;width:1px; height:1px;top: 0;left: 0;}
.popimg a.popup,
.popimg a.popup:visited {display: block;width: 100px;top: 0;left: 0;}
.popimg a.popup:hover {background-color: #fff;}
.popimg a.popup:hover .large {display: block;position: absolute;width: auto;height: auto;top: 0;left: 0;}

次に画像を挿入したい部分に、以下の様にdivを挿入します。
<div class="popimg">
<a href="#" title="" class="popup"><img src="サムネイル画像のURL" width="" height="" alt="サムネール画像" title="サムネール" /><img src="拡大画像のURL" width="auto" height="auto" alt="拡大画像" title="拡大画像" class="large" /></a>
</div>

各画像のURLは任意に設定してください。その他、必要箇所は変更してださい。
(※「<」や「>」は全角で書いていますが、全て半角に直してください。)

こんな感じになります。画像にマウスをのせてみてください。


サムネール画像拡大画像


行っていることは、マウスオンと同時にサムネイル画像を1px×1pxの極小にしてとばし、
同時に、あらかじめ1px×1pxにしてとばしてあった拡大画像を元のサイズで表示させているわけです。

スポンサーサイト

  • 2008.11.11 Tuesday
  • -
  • 00:39
  • -
  • -
  • -
  • by スポンサードリンク

コメント
コメントする









この記事のトラックバックURL
トラックバック
Profile
フロウデザインa.k.a.Dispatch
フォトギャラリー
RSSに追加
My Yahoo!に追加
Add to Google
Subscribe with livedoor Reader
Calendar
      1
2345678
9101112131415
16171819202122
23242526272829
<< February 2020 >>
Search this site.
sponsored links
Selected entries
Categories
Archives
Mobile
qrcode
Links
MoMAstore
センプレ
hhstyle.com
 iTunes Store(Japan)
写真素材 PIXTA
⇒My men
⇒Loves
⇒Reference
ashi-@
A to Z search
相互リンク検索エンジン〜AtoZ♪Search〜
Others
Powered
TKYスタイル
フロウデザイン
インフォグルーヴ