ソースのまとめ （リンクが1つだけの場合）
これまでに記述したソースのまとめです。 （複数個並べる場合はこちら→）
■スタイルシート部分：
<style type="text/css">
a.rabbit {
background-image: url("rabbit.gif");
display: block;
width: 100px; /* 画像1枚分の横幅(※1) */
height: 100px; /* 画像1枚分の高さ(※2) */
text-indent: -5000px; /* 文字を消す */
}
a.rabbit:hover {
background-position: top right;
}
</style>
a.rabbit {
background-image: url("rabbit.gif");
display: block;
width: 100px; /* 画像1枚分の横幅(※1) */
height: 100px; /* 画像1枚分の高さ(※2) */
text-indent: -5000px; /* 文字を消す */
}
a.rabbit:hover {
background-position: top right;
}
</style>
■HTML部分：
<a href="sample.html" class="rabbit">うさぎリンク</a>
上記のソースを表示すると、以下のように見えます。
画像リンクが1つだけなら、上記のソースで実現できます。 しかし、複数のリンクを並べる場合は、上記のソースをたくさん列挙する方法だと無駄が多くなってしまいます。
次のページでは、共通する部分の記述を1回で済むようにして、全体の記述量を少なく抑えた書き方をご紹介いたします。 冒頭のサンプルのように、複数の画像リンクを並べて使いたい場合にご活用下さい。
