マウスが載ったときにリンク画像を変化させる
画像リンクの上にマウスを載せたときに、画像が変化するようなリンクを作ってみましょう。 実現方法はいろいろありますが、JavaScriptを使わずにスタイルシートで実現する方法をご紹介いたします。
下記に4つの画像リンクがあります。それぞれにマウスを載せてみて下さい。 待ち時間なしで、すぐに画像が切り替わるはずです。
ねずみリンク うさぎリンク いぬリンク カンガルーリンク
▲それぞれマウスを載せると画像が変わります。
4つの画像にマウスを載せた瞬間に、画像が切り替わります。切り替わる先の画像を読み込む待ち時間はありません。 なぜなら、ここでは以下のような「200×100」ピクセルの画像を使っているからです。
上記は、2つの画像ファイルを並べて掲載しているのではありません。「ねずみ」が2匹描かれている横長の「1つの画像」を掲載しています。 以下も同様です。
うさぎ（200px×100px）：
いぬ（200px×100px）：
カンガルー（200px×100px）：
リンクの初期状態では、これらの画像の左側半分だけを表示させています。 マウスが載ると、画像の右側半分だけを表示するように切り替えます。 それによって、画像が変化したように見せています。
元々1つの画像なので、切り替わる際の読み込み待ち時間は存在しないわけですね。
このように、「左側半分だけを表示」・「右側半分だけを表示」というデザインを、スタイルシートで実現しています。
今回は、上記のような「マウスを載せると画像が変化するリンク」を、スクリプトを使わずにスタイルシートを活用して作る方法をご紹介いたします。
※この方法は、スクリプトを書かずに実現できる代わりに、以下のような問題もあります。
(1) スタイルシートが有効な環境で、何らかの原因で画像が読み込まれなかった場合、何も表示されなくなってしまいます。（スタイルシートも読まれなければ、代わりの文字が表示されます。）
(2) スタイルシートで文字を消すための記述方法が、あまり褒められる使い方ではありません。
これらの問題が気になるようなら、スクリプトを使って実現する方法を使うと良いでしょう。
それでは、順番に作り方を見ていきましょう。
2. 画像をそのままリンクにはしないHTMLの書き方へ >>
【目次】
