個別記事

前後の記事

CSS だけでフォトギャラリー

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

CSS だけでフォトギャラリーっぽいのを作ってみるテスツ。「stu nicholls | CSS PLaY | CSS photo-gallery hover and active」あたりを参考に、ちょっとやってみた。サムネールにマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。別の場所をクリックすると元に戻る。ってな挙動。最低限のブラウザでしかチェックしてないんで、まともに動かない環境もあるかも知んない。

(X)HTML は下記のように、画像を順不同のリストで並べている。

<ul id="gallery">
  <li><a href="#empty-anchor"><img src="01.png" /></a></li>
  <li><a href="#empty-anchor"><img src="02.png" /></a></li>
  <li><a href="#empty-anchor"><img src="03.png" /></a></li>
  <li><a href="#empty-anchor"><img src="04.png"" /></a></li>
  <li><a href="#empty-anchor"><img src="05.png" /></a></li>
  <li><a href="#empty-anchor"><img src="06.png" /></a></li>
  <li><a href="#empty-anchor"><img src="07.png" /></a></li>
  <li><a href="#empty-anchor"><img src="08.png" /></a></li>
  <li><a href="#empty-anchor"><img src="09.png" /></a></li>
  <li><a href="#empty-anchor"><img src="10.png" /></a></li>
</ul>

ポイントとしては、z-index を使ってレイヤーの階層を明示してあげないと、サムネールと拡大画像とかがぐちゃぐちゃになっちゃってヒドスな状態になる。ちなみに、:active や :focus の疑似クラスを使って拡大画像を固定させるんだけど、Opera とか Safari あたりはクリックを離すと active と focus の状態を維持してくんないので拡大画像が固定されない :-(

2005-11-05T17:04:31+09:00 | コメント (2) | トラックバック (2) |はてなブックマーク

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

トラックバック

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

このリストは、次のエントリーを参照しています: CSS だけでフォトギャラリー:

Another Life's Flavor さんからのトラックバック
The scales fall from my eyes.
CSSだけでフォトギャラリー(Lucky bag::blogさん発) すごいー。いつ見ても目から鱗ポロポロですよ！ 私の本サイトの素材集もこのタイプにしよ... [続きを読む]
2005年11月10日 14:03
徳の虫 さんからのトラックバック
てｓｔ
[続きを読む]
2006年01月28日 23:20

コメント

nbr さんからのコメント

おはつです。
XHTMLの構造が非常にシンプルなのがいいですね～。メンテナンス面でもかなり有用な気がします。

2005年11月06日 10:42
e-luck さんからのコメント [TypeKey Profile Page]

なるだけ XHTML の方はシンプルにってのは重要ですよね :-)
CSS の方もリストの増減に対応しやすいようにってのを（一応）念頭に置いて考えてみたつもりだったりもします。

2005年11月07日 19:58

コメントしてください

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




保存しますか?


(V) (P)