リンク用画像を用意する
まずは、リンクにする画像を用意しましょう。 「最初に表示しておく画像」と「切り替える画像」を合体させて1つの画像にします。 その際、「最初に表示しておく画像」と「切り替える画像」の大きさは同じでなければなりません。
以下の例では、100×100ピクセルの画像を2つ合体させて、200×100ピクセルの横長画像を作っています。
このような画像を、必要なだけ作成しておきます。
なお、元の画像は正方形である必要はありません。とにかく「同じサイズ」の画像が2つ合体していればOKです。例えば、「88×31」サイズのバナー画像を2つ合体させて「176×31」サイズの画像を作っても構いません。
リンクを作る： 画像をリンクにはしない
まずは、リンクを作るHTMLを書きましょう。
通常、画像をリンクにする場合は、画像を作るimg要素をa要素の中に含めます。たとえば、以下のように記述するでしょう。
<img src="image.gif" width="200" height="100" alt="画像">
</a>
しかし、今回作るリンクは、上記のようには記述しません。以下のように、テキストリンクを作ります。
上記のままだと、ただ以下のように表示されるだけです。普通のテキストリンクですね。
ここにスタイルシートを使って、テキストを消して画像を表示させるように作ります。
なぜそんな面倒な装飾方法を使うのかというと、「画像を半分だけ表示させる」描画と、「マウスが載ったときに変化させる」装飾を施すためです。 画像を直接リンクにせず、「リンクの背景画像」として表示させることで、簡単に実現できるようになります。
さて、後からスタイルシートを適用できるよう、クラス名を付加しておきましょう。
ここでは、クラス名を「rabbit」としておきました。この名称は何でも構いません。複数のリンクを掲載する場合は、表示したい画像ごとにクラス名を分ける必要があります。
HTMLの記述はこれで完了です。
次に、スタイルシートを使って、これらのテキストリンクを画像リンクに変えましょう。
