絵の切り替え

基本

次の図の上にマウスを持っていくと画像が替わります。

Click me!

この仕組みを説明しましょう。

まず,普通の画像を表示するには,たとえば次のようにします。

<img src="photo1.jpg" alt="Click me!">

もう一つの画像 photo2.jpg を用意し,マウスを上に持っていくとそちらに切り替わるようにします。

<img src="photo1.jpg" alt="Click me!"
     onmouseover="this.src='photo2.jpg'">

onmouseover は「マウスが上に来たならば」という意味です。this.src='photo2.jpg' が JavaScript の命令で,this(それ自身)の src という属性を photo2.jpg にすることを意味します。

これではマウスが去った後も替わったままなので,実際には次のようにします。

<img src="photo1.jpg" alt="Click me!"
     onmouseover="this.src='photo2.jpg'"
     onmouseout="this.src='photo1.jpg'">

onmouseout は「マウスが去ったならば」という意味です。

応用

クリックすると「ガオー!!」と表示するようにしてみましょう。

<img src="photo1.jpg" alt="Click me!"
     onmouseover="this.src='photo2.jpg'"
     onmouseout="this.src='photo1.jpg'"
     onmousedown="alert('ガオー!!')">

onmouseover の類をDOMイベントといいます。DOMはDocument Object Modelのことで,HTMLの画像などの要素を扱う仕組みのことを指します。

細かいこと

画像には <img src="photo1.jpg" width="450" height="300" ...> のように幅(width)と高さ(height)を指定しておくと,表示が少し速くなります。

マウスが乗ったときに画像を切り替える際に,次のようにあらかじめ2番目の画像を先読み(プリフェッチ,prefetch)しておくと滑らかに切り替えられるかもしれません。

<script>
var img = new Image();
img.src = "photo2.jpg";
</script>

<img src="photo1.jpg" width="450" height="300"
     onmouseover="this.src='photo2.jpg'"
     onmouseout="this.src='photo1.jpg'"
     onmousedown="alert('ガオー!!')"
     alt="Click me!" title="Click me!">

なお,<img ... title="Click me!"> と書くと,マウスを近づけると「Click me!」という吹き出しが現れます。