|
|---|
説明の例としてこんな画像を使います。
a要素に上半分の画像を表示させて、カーソルが画像の上にある場合は、下半分の画像に切り替わるようにします。
カーソルが画像の上にある状態の判断には、a要素の擬似クラスのhoverを使います。
単純にimg要素を使って画像を表示させると、hover時に画像の切り替えができません。
hoverで画像を切り替えるために、a要素の背景画像にこの画像を設定します。
背景を表示させるために要素の幅と高さを表示する画像のサイズに合わせます。
a{
background-image:url(../images/cart_button_splite.png);
background-repeat:no-repeat;
background-position:0px 0px;
height:20px;
width:115px;
}
HTMLは、こんな感じです。
<p><a href="css_sprite_sample1.html"></a></p>
サンプル1
これだけだと画面に画像が表示されません。
a要素は、インライン要素なので幅と高さが適用されないからです。
displayのプロパティを使って、a要素をブロックレベル要素にします。
a{
background-image:url(../images/cart_button_splite.png);
background-repeat:no-repeat;
background-position:0px 0px;
height:20px;
width:115px;
display:block;
}
これで背景画像が表示されます。
次にhover時の背景画像を設定します。
背景画像の切り替えは、background-positionの設定で行います。
この画像のbackground-positionの座標は、次のようになっています。
background-positionには、表示する画像の左上の座標を設定するので、a:hoverのCSSは
a:hover{
background-position:0px -20px;
}
となります。
サンプル3
これでカーソルオーバーで画像が切り替わるようになりましたが、a要素の内容を空にするのはHTMLの構文上正しくないので、HTMLの内容を
<a href="css_sprite_sample1.html">カートを見る</a></p>
とします。
これだと画像に文字が表示されるので、文字列を表示させないようにします。
文字列を表示させないようにするには、text-indentをマイナスにします。
これで画面外に文字列を表示させるようにします。
a{
background-image:url(../images/cart_button_splite.png);
background-repeat:no-repeat;
background-position:0px 0px;
height:20px;
width:115px;
display:block;
text-indent:-9999px;
}
サンプル4
IEの場合これで問題ないですが、firefoxの場合、クリックすると赤い点線が出るようになります。
これを消すのにCSSに、outline:0;というのを追加します。
追記
overfrow:hidden;
と書くやり方もありました。
こっちの方がいいかもしれないです。
サンプル5
span{
background-image:url(../images/cart_button_splite.png);
background-repeat:no-repeat;
background-position:0px 0px;
height:20px;
width:115px;
display:block;
text-indent:-9999px;
}
<span;>カートを見る</span></p>
サンプル6
たぶん間違いはないと思うのですが、もしかしたらおかしいところがあるかもしれません。
またしばらく更新できないと思いますが、時間があれば書くようにします。
この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。
私は普通の読者です、皆さんはどうですか？この記事は
このウェブサイトは実際には厳しいです。
by Ana (2018-03-03 03:20)