CSSスプライトとJavaScript

通常ホームページの画像はimgタグでそのまま全部表示させますが、CSSスプライトは一枚の画像の一部分を表示させるテクニックです。
例えば下のようなトランプの画像があります。この画像は一枚です。


この一枚の画像を読み込んで、ハートのエースやスペードの10など任意の一つのカードを表示することができます。
下はその例です。はじめはカードの裏面が表示されていますが、クリックすることで適当なカードが表示されます。
これらのカード画像は裏も表も全部上記の一枚の画像の一部分です。
CSSスプライトを使わないとトランプ全部で50枚以上の画像を用意する必要があり面倒なことになります。
CSSスプライトを使うことにより画像数を減らすことができ、サイトの表示を速めることができます。

HTML部分

外側のdivで使っているoverflow:hiddenは、内側で使っているfloat:leftをclearするためのものです。
cardクラスは全部共通、初期値でuraクラスを与えています。

CSS部分

background-positionをずらすことにより、表示位置を変えています。
クラス名のc1~c13はクラブの1~13。d1~d13はダイヤの1~13。h1~h13はハートの1~13。s1~s13はスペードの1~13。
今回は、裏面とハートの1~10、スペードの1~10までしか使っていないのですが、一応全部載せています。

JavaScript部分

JavaScriptについては、次回解説しますが、今回のソースは以下です。

ここまでは下準備で、次回何かを作ってみます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする