[CSS]CSSで簡単に拡大画像をアナウンスする

09-07-2008 Category: XHTML+CSS

CNET JAPANのニュースにフォトレポート(リンク先は新型PSPのフォトレポート)という形式の記事があるんだけど、そこでは写真上ににカーソルが乗った瞬間に、「写真をクリックすると次へ移動します」みたいなのが写真の上に出てくるんです。で、それを見てたらふと「写真をクリックすると拡大します」みたいな感じでも使えるような気がしたので、真似したくなった。

コピック

フォトレポートの画像周辺のソースをざっと見ただけなんではっきりとは言えないんだけど、＜a＞と＜img＞の間に空spanが入ってるんでなんとなくやり方がわかったようなわからないような。以前Web Designer WallでやってたCSS Decorative Galleryみたいなのの延長線上+αかなぁとは思うんだけど確証なし。でもまぁあんまり難しい事は出来ないので、簡易バージョンで再現してみました。


では、これの作り方ですが、まず

という二枚の画像を用意します。はい、これでもう8割方終わりましたお疲れ様です。

もしかして･･･と思った方！そのとおりです！あとは一枚目の画像をaのbackgroundに指定して、a:hoverのbackgroundに二枚目のアナウンスが出てる方を指定して完成です。

いやー出来た出来た。なんか釈然としないけど。

a.ann {
display: block;
overflow: hidden;
width: 230px;
height: 142px;
background-image: url(一枚目の画像);
background-repeat: no-repeat;
background-position: center center;
text-indent: -999px;
}

a.ann:hover { background-image: url(二枚目の画像);}

CSSでのロールオーバーの応用ですね。たぶん2枚の画像を上下なり左右なりに並べて一枚の画像にして、hoverでbackground-positionを一枚の長さ分指定しても出来ると思う。

でまぁ結論としては、text-indent:-999ってあんまり行儀がよくない気がするし、そもそも画像を編集するのも量が多いと面倒だし枚数分だけ個別にCSSを書いてやる必要があるので、大量に使うことがわかってるならこれでやらない方がいいですね。まぁこういう感じのをピンポイントで即座に求められた時にいかがでしょうか。

関連する投稿

最新の記事

Trackback URL

Trackbacks

Comments

Comment feed

Comment