DN*BLOG

CSS 画像トリミング＆フォトアルバム

2008/02/22 12:52

見たいなのを作ってみました。

WWW WATCHさんのサイトを見ていたら面白い記事があったのでそれを利用してフォトアルバム的なものを作ってみました。
応用していけば面白そうなコンテンツができそうなので、メモがてらに・・・。

clip: rect(0 100px 100px 0);に関しましては、WWW WATCHさんのサイトをご覧下さいませ。

XHTMLソース


<p class="clip">
	<a href="#" class="sample01"><img src="img/sample01.jpg" width="500" height="370" alt="" /></a>
	<a href="#" class="sample02"><img src="img/sample02.jpg" width="500" height="370" alt="" /></a>
	<a href="#" class="sample03"><img src="img/sample03.jpg" width="500" height="370" alt="" /></a>
	<a href="#" class="sample04"><img src="img/sample04.jpg" width="500" height="370" alt="" /></a>
</p>

ただ並んでるだけです。（汗）
表示位置などは全てCッSで行っているのでXHTMLのソースは普通ですね。

CSSソース

p.clip {
    position: relative;
    top: 0;
    left: 0;
	z-index:0;
}

p.clip a.sample01 img,
p.clip a.sample02 img,
p.clip a.sample03 img,
p.clip a.sample04 img {
	position: absolute;
	clip: rect(0 100px 100px 0);
	z-index:1;
	margin:10px;
}

p.clip a.sample01 img {
	top: 0;
	left: 0;
}

p.clip a.sample02 img {
	top: 0;
	left: 110px;
}

p.clip a.sample03 img {
	top: 0;
	left: 220px;
}

p.clip a.sample04 img {
	top: 0;
	left: 330px;
}

p.clip a:hover {
	border: none;
}

p.clip a:hover img {
	clip: rect(0 500px 370px 0);
	z-index:10;
}

p.clip a:active img {
	clip: rect(0 100px 100px 0);
	overflow:hidden;
}

clip: rect(0 100px 100px 0);で画像を100×100にトリミングして、:hoverしたときに元のサイズで表示させています。

p.clip a:active imgで画像をクリックしたとき大きい画像をもとのサイズに戻す方法をとっています。
ただ、元画像の範囲100×100の場所でクリックしてもまたその画像が拡大表示されてしまいます。

無理矢理なフォトアルバムですかね・・・・。
数枚の写真を載せたいときとかに重宝しそうな気がします。

ここまでするならLightboxとか使った方がいいのかな・・・。(u_u)

これらのアイコンをクリックするだけで各ソーシャルブックマークにブックマークをすることができます。