ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

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

画像リンクの上にマウスを載せたときに、リンク画像が別の画像に変化するようなリンクを作ってみましょう。今回は、JavaScriptなどのスクリプトを使わずに、スタイルシートを使って実現する方法をご紹介致します。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

画像リンクを複数個並べて表示したい場合のために、 共通する部分の記述が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つを用意しています。それぞれ異なってさえいれば、名称は何でも構いません。

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

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

おわりに

今回は、マウスを載せると画像が変化するリンクを、スクリプトを使わずにスタイルシートを活用して作る方法をご紹介いたしました。
リンクや画像に関しては、以下の関連記事もぜひどうぞ。

【関連記事】

  • 前のページへ
  • 1
  • 5
  • 6
  • 7
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます