マウスが載ったときにリンク画像を変化させる

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

下記に4つの画像リンクがあります。それぞれにマウスを載せてみて下さい。 待ち時間なしで、すぐに画像が切り替わるはずです。

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

4つの画像にマウスを載せた瞬間に、画像が切り替わります。切り替わる先の画像を読み込む待ち時間はありません。 なぜなら、ここでは以下のような「200×100」ピクセルの画像を使っているからです。

リンク用ねずみ画像

上記は、2つの画像ファイルを並べて掲載しているのではありません。「ねずみ」が2匹描かれている横長の「1つの画像」を掲載しています。 以下も同様です。

うさぎ(200px×100px):
リンク用うさぎ画像
いぬ(200px×100px):
リンク用いぬ画像
カンガルー(200px×100px):
リンク用カンガルー画像

リンクの初期状態では、これらの画像の左側半分だけを表示させています。 マウスが載ると、画像の右側半分だけを表示するように切り替えます。 それによって、画像が変化したように見せています。
元々1つの画像なので、切り替わる際の読み込み待ち時間は存在しないわけですね。

このように、「左側半分だけを表示」・「右側半分だけを表示」というデザインを、スタイルシートで実現しています。

今回は、上記のような「マウスを載せると画像が変化するリンク」を、スクリプトを使わずにスタイルシートを活用して作る方法をご紹介いたします。

※この方法は、スクリプトを書かずに実現できる代わりに、以下のような問題もあります。
(1) スタイルシートが有効な環境で、何らかの原因で画像が読み込まれなかった場合、何も表示されなくなってしまいます。(スタイルシートも読まれなければ、代わりの文字が表示されます。)
(2) スタイルシートで文字を消すための記述方法が、あまり褒められる使い方ではありません。
これらの問題が気になるようなら、スクリプトを使って実現する方法を使うと良いでしょう。

それでは、順番に作り方を見ていきましょう。

2. 画像をそのままリンクにはしないHTMLの書き方へ >>

【目次】

  1. サンプル(このページ)
  2. 画像を作成するけどそのままリンクにはしない
  3. スタイルシートで半分だけ表示させる
  4. マウスが載ったときに切り替える
  5. ソースのまとめ (リンクが1つだけの場合)
  6. ソースのまとめ (複数のリンクを並べる場合)