FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSを使って、画像を重ねて表示してみた

画像など重ねる、レイヤー表示みたいなのをどうやっているのか調べてみた。

CSSで以下の属性を使えばいい
・positionでabsoluteを指定
・top left bottom right で位置指定
・z-index で表示順指定。数値が大きなものほど前面に表示される

これを使って、「小さな画像をクリックすると、大きな画像をポップアップするJavaScript」を作ってみた。
仕様はこんな感じ
・縮小した画像と、大きな画像を同じ親要素の子要素として記述
・大きな画像は style="display: none" にしておく
・縮小した画像をクリックすると、縮小した画像の上に大きな画像を表示(style="display: inline" に変える)
 大きな画像が表示されても、他の画像の位置は変わらない。大きな画像と重なる部分は表示されない
・大きな画像をクリックすると、画像が消えて下層の縮小した画像が表示される
・他の縮小した画像をクリックすると、現在表示されている大きな画像は消えて、クリックした画像に対応する大きな画像が表示される

大きな画像を表示する位置を指定するのにちょっと手間取った。
縮小した画像と同じ位置に表示するには、縮小した画像と大きな画像のペアごとに親要素を記述し、
親要素に style="position: relative" を指定すればいい。
そして、子要素で style="position: absolute" とすれば、親要素からの絶対位置になる。

さて明日は何をしようか。PHPの勉強に入ろうか、jQueryに手を出してみたい気もする。
スポンサーサイト

コメント

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。