スタイルシートを使って画像リンクにする
先ほど作成したテキストリンクを、スタイルシートを使って画像リンクにします。
ここで最低限必要な装飾は以下の3種類です。
- 画像を背景画像として表示する
- 画像の左側半分だけを表示する
- テキストを消す
まずは、背景画像（rabbit.gif）を表示させてみます。
a.rabbit {
background-image: url("rabbit.gif");
}
background-image: url("rabbit.gif");
}
上記のスタイルシートを適用すると、以下のように見えます。
さっぱり見えませんね。
ただ「背景画像」を表示させただけでは、文字の存在する空間にしか描かれないので、このような表示になります。
そこで、次のようにスタイルシートを加えてみましょう。
a.rabbit {
background-image: url("rabbit.gif");
display: block;
width: 200px;
height: 100px;
}
background-image: url("rabbit.gif");
display: block;
width: 200px;
height: 100px;
}
ブロックレベルにした上で、横幅（200px）と高さ（100px）を指定しました。
すると、以下のような表示になります。
これで、背景画像が全部表示されました。クリック可能面積も広がっています。
次に、この背景画像の「左側半分だけ」を表示させてみましょう。これは、とても簡単です。
a.rabbit {
background-image: url("rabbit.gif");
display: block;
width: 100px;
height: 100px;
}
background-image: url("rabbit.gif");
display: block;
width: 100px;
height: 100px;
}
上記のように、表示領域の横幅（widthプロパティの値）を半分にするだけです。
これで、以下のような表示になります。
ずいぶん近づいてきました。
あとは、余計なテキストを消すだけです。テキストを消す方法はいくつかありますが、ここでは以下のように記述します。
a.rabbit {
background-image: url("rabbit.gif");
display: block;
width: 100px;
height: 100px;
text-indent: -5000px;
}
background-image: url("rabbit.gif");
display: block;
width: 100px;
height: 100px;
text-indent: -5000px;
}
text-indentプロパティに、マイナスの値「 -5000px 」を指定しています。 この値は、-6000 や -8250 などでも構いません。とにかく、画面からはみ出して遠く左側へ表示するように指定します。 これによって、テキストが画面外に出ますので、消えたように見えます。
これで、以下のように見えます。
ここまでで、最初に作ったテキストリンクを画像リンクにすることができました。
次に、マウスが載ったときに、「画像の右側半分」が表示されるようにスタイルシートを記述しましょう。
