6/7 マウスが載ると画像が変化するリンクを作る [ホームページ作成] All About

ソースのまとめ（複数のリンクを並べる場合）

画像リンクを複数個並べて表示したい場合のために、共通する部分の記述が1回で済む書き方をご紹介しておきます。

■HTMLソース：

<p class="imagelinks">

   <a href="sample.htm" class="mouse">ねずみリンク</a>

   <a href="sample.htm" class="rabbit">うさぎリンク</a>

   <a href="sample.htm" class="dog">いぬリンク</a>

   <a href="sample.htm" class="kangaroo">カンガルーリンク</a>

   <br clear="left">

</p>

※共通するスタイルを一括して記述できるよう、リンク全体を「p要素」で囲んでいます。 p要素には、スタイルを適用できるよう「imagelinks」というクラス名を付加しています。

■スタイルシートソース（共通部分）：

<style type="text/css">

   /* ▼初期状態のリンクの装飾 */

   p.imagelinks a {

      display: block;

      width: 100px;  /* 画像1枚分の横幅(※1) */

      height: 100px; /* 画像1枚分の高さ(※2) */

      text-indent: -5000px; /* 文字を消す */

      float: left;   /* 横に並べる(※3) */

   }

   /* ▼マウスが載ったときの装飾 */

   p.imagelinks a:hover {

      background-position: top right;

   }

</style>

※1：実際に表示させたい面積の横幅を記述します。
※2：用意した画像の高さを記述します。
※3：複数のリンクを横方向に並べる場合には、このようにfloatプロパティに値「left」を指定します。この記述を省略すると、画像は1つずつ縦方向に並びます。1つだけしか掲載しない場合は、この1行は不要です。

■スタイルシートソース（個別の画像表示部分）：

以下は、冒頭のサンプルのように、4つの画像リンクを並べるソースです。もっと多く並べたい場合は、必要なだけいくつでも増やせます。

<style type="text/css">

   /* (1) ねずみ */

   p.imagelinks a.mouse {

      background-image: url("mouse.gif");

   }

   /* (2) うさぎ */

   p.imagelinks a.rabbit {

      background-image: url("rabbit.gif");

   }

   /* (3) いぬ */

   p.imagelinks a.dog {

      background-image: url("dog.gif");

   }

   /* (4) カンガルー */

   p.imagelinks a.kangaroo {

      background-image: url("kangaroo.gif");

   }

</style>

※いくつでも必要なだけ列挙できますが、それぞれのリンクでclass属性の値（クラス名）が重複しないように、異なる値にする必要があります。上記の例では、mouseクラス・rabbitクラス・dogクラス・kangarooクラスの4つを用意しています。それぞれ異なってさえいれば、名称は何でも構いません。

上記のソースすべてを表示させると、以下のように見えます。

ねずみリンクうさぎリンクいぬリンクカンガルーリンク
▲それぞれマウスを載せると画像が変わります。