画像のスプライト
画像スプライトは、単一の画像に入れ画像のコレクションです。
多くの画像を使用したWebページの読み込みに時間がかかり、複数のサーバー要求を生成することができます。
画像スプライトを使用すると、サーバー要求の数を削減し、帯域幅を節約します。
イメージ・スプライト - 簡単な例
代わりに、3つの別々の画像を使用して、我々は、この単一のイメージを使用("img_navsprites.gif")
CSSで、我々は我々が必要とする画像の一部だけを表示することができます。
次の例では、CSSは、そのうちの一部を指定し"img_navsprites.gif"表示するイメージ：
例を説明しました：
-
<img id="home" src="img_trans.gif">- src属性を空にすることはできませんので、のみ小さな透明の画像を定義しています。 表示された画像は、我々は、CSSで指定した背景画像になります -
width: 46px; height: 44px;width: 46px; height: 44px;-私たちが使用したい画像の部分を定義します -
background: url(img_navsprites.gif) 0 0;-背景画像とその位置を定義します（左0PX、トップ0PX）
これは、今、私たちがリンクとホバー効果を使用して、それを拡張したい、画像のスプライトを使用する最も簡単な方法です。
画像のスプライトは - ナビゲーションリストを作成します
私たちは、スプライト画像を使用したい("img_navsprites.gif")ナビゲーションリストを作成します。
それがリンクであること、また、背景画像をサポートすることができますので、我々は、HTMLのリストを使用します。
例
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif')
0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif')
-91px 0;
}
»それを自分で試してみてください 例を説明しました：
- #navlist {position:relative;} -位置は、その内部の絶対配置を可能にするために相対的に設定されています
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} -マージンとパディングがリストスタイルが削除され、0に設定し、すべてのリスト項目が位置絶対あるさ
- #navlist li, #navlist a {height:44px;display:block;} -すべての画像の高さ44pxです
今、それぞれの特定の部分に位置し、スタイルに起動します。
- #home {left:0px;width:46px;} -左にすべての方法を位置付け、および画像の幅は46pxです
- #home {background:url(img_navsprites.gif) 0 0;} -定義した背景画像とその位置（左0PX、トップ0PX）
- #prev {left:63px;width:43px;} -右（#home幅46px +アイテムの間にいくつかの余分なスペース）に63pxを位置付け、そして幅は43pxです。
- #prev {background:url('img_navsprites.gif') -47px 0;} -右に背景画像47pxを定義します（#home幅46px + 1pxのライン分周器）
- #next {left:129px;width:43px;} - （#prevの開始が63px + #prev幅43px +余分なスペースである）右に129pxに配置され、幅は43pxです。
- #next {background:url('img_navsprites.gif') -91px 0;} -右に背景画像91pxを定義します（#home幅46px + 1pxのライン分周器+ #prev幅43px + 1pxのライン分周器）
イメージ・スプライト - ホバー効果
今、我々は、ナビゲーションリストにホバー効果を追加したいです。
 | ヒント :hoverセレクタがリンクだけでなく、すべての要素で使用することができます。 |
|---|
当社の新しいイメージ("img_navsprites_hover.gif")ホバー効果のために使用する3つのナビゲーション画像と3の画像が含まれています。
これは1つのイメージではなく、6つの別々のファイルであるため、ユーザが画像の上に置いたときに、何の読み込み遅延はありません。
我々は唯一のホバー効果を追加するために、コードの3行を追加します。
例
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px
-45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px
-45px;
} »それを自分で試してみてください 例を説明しました：
- #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} -すべての3つのホバーの画像については、我々は唯一の45pxさらに下、同じ背景の位置を指定します