CSSスプライトで、イメージ画像の一部のみ表示させる端的な方法


やり方

画像を表示して、その一部だけ表示させるやり方です。

  1. 親領域に表示したい範囲を設定します。
  2. ・子領域では、その親領域で定義した範囲に対して、左上を基点にして、ずらします。(そのためマイナス方向にずらす)csswindowImage-min

1.親領域の設定

   overflow:hidden をすることで範囲外の領域は表示されなくなります。 これをしないと、表示が隠れず全体が表示されます。

    position:relative とすることで、親領域が、ひとつ前のHTML タグ要素の次に配置されます。 absoluteとすると、ページの左上からの座標に対する指定となります。画面上の今表示されている表示領域範囲とはまた別の座標。これは子領域で absolute設定をするため。

    width,height で 表示させたい範囲の大きさを指定します。元画像の大きさを指定するのではありません。

2.子領域設定

親領域で表示範囲が制限されているので、表示したものは枠に収まるものだけ表示されます。

そのため 親領域が窓で、子領域に img を指定するときは、窓の後ろにある画像の紙をずらすイメージを描くとわかりやすいです(上図)。

子領域のポジションを  例えばleft, topを使って左上にずらします。あわせて absolute設定もします(位置の基準となる親表示領域でrelativeにしておく)。

こうすることで、後ろの絵が左上に移動し、一方手前のクリッピング領域である親窓が一部を表示するので、最終的に、イメージの一部の領域のみがユーザに表示されていることになります。

表示領域:親表示領域のフレーム
<div style="position:relative;overflow:hidden;width:100px;height:30px;">

    ずらす範囲:子領域のイメージ
    <img src="image.png" alt="" border="0" style="left: -0px;top: -80px; position:absolute;"/>
</div>
max-widthが設定されていたり、lazy-loadで範囲外を設定した場合など、うまく行かなくなることがあるので注意!(lazyloadをオフにしたり、画面外にイメージが出ないようにしたり、max-widthに影響されないように再設定等が必要)

 

抜粋サンプル

上の説明図の右上部分だけを表示しています。

 

マウスオーバーの例

例えば、上下に 200 x 50 のイメージを2つ並べた場合、親に 100,50のサイズを指定し(div style)、子にはマウスオーバの時(:hover)、 0,0 → 0,-50を指定すると上下が入れ替わるイメージになります。

<STYLE type="text/css"><!--
 .shift-change img:hover
 {
 left: 0px;top: -50px;
 }
 
 .shift-change img
 {
 left: 0px;top: 0px;
 }-->
</STYLE>
<div style="overflow:hidden;position:relative;
width:200px;height:50px;" class="shift-change">
	<img src="jyougefukidashi.png" 
alt="" border="0" style=" position:absolute;"/>
</div>

抜粋サンプル

元画像

jyougefukidashi-min

お試し:マウスを乗せると下側の画像が表示されます。

やり方 その2 background-image

基本的にやり方は上と同じです。 タグは一つにして、background のイメージを利用します。

前回子領域で設定した移動量は background-positionで同様な指定をします。

display:blockをしたのは SPANタグを使ったからです。 DIVのような blockタグを使えば、不要です。

<span style="display: block; overflow: hidden; width: 200px; height: 50px;
 background: url('http://edutainment-fun.com/jyougefukidashi-min.png') 0 0; 
 background-position: -0px -50px;"> </span>

下側部分だけを表示しています。

 
Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

478 views.



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です