マウスが載ると画像が変化するリンクを作る(2ページ目)

リンク用画像を用意する

まずは、リンクにする画像を用意しましょう。 「最初に表示しておく画像」と「切り替える画像」を合体させて1つの画像にします。 その際、「最初に表示しておく画像」と「切り替える画像」の大きさは同じでなければなりません。

以下の例では、100×100ピクセルの画像を2つ合体させて、200×100ピクセルの横長画像を作っています。

このような画像を、必要なだけ作成しておきます。
なお、元の画像は正方形である必要はありません。とにかく「同じサイズ」の画像が2つ合体していればOKです。例えば、「88×31」サイズのバナー画像を2つ合体させて「176×31」サイズの画像を作っても構いません。

リンクを作る： 画像をリンクにはしない

まずは、リンクを作るHTMLを書きましょう。
通常、画像をリンクにする場合は、画像を作るimg要素をa要素の中に含めます。たとえば、以下のように記述するでしょう。

しかし、今回作るリンクは、上記のようには記述しません。以下のように、テキストリンクを作ります。

上記のままだと、ただ以下のように表示されるだけです。普通のテキストリンクですね。

ここにスタイルシートを使って、テキストを消して画像を表示させるように作ります。
なぜそんな面倒な装飾方法を使うのかというと、「画像を半分だけ表示させる」描画と、「マウスが載ったときに変化させる」装飾を施すためです。 画像を直接リンクにせず、「リンクの背景画像」として表示させることで、簡単に実現できるようになります。

さて、後からスタイルシートを適用できるよう、クラス名を付加しておきましょう。

ここでは、クラス名を「rabbit」としておきました。この名称は何でも構いません。複数のリンクを掲載する場合は、表示したい画像ごとにクラス名を分ける必要があります。

HTMLの記述はこれで完了です。
次に、スタイルシートを使って、これらのテキストリンクを画像リンクに変えましょう。

3. スタイルシートで半分だけ表示させる方法へ >>