絵の切り替え

基本

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

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

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

<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>
const 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!」という吹き出しが現れます。