絵の切り替え

基本

次の図の上にマウスを持っていくと画像が替わります（非常に古いブラウザではうまくいかないかもしれません。非常に古いブラウザでもうまくいく方法は下のほうにあります）。

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

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

<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('ガオー！！')">

細かいこと

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

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

<script type="text/javascript">
(new Image(450,300)).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!">

なお，<img ... alt="Click me!"> または <img ... title="Click me!"> と書くと，マウスを近づけると「Click me!」という吹き出しが現れます。これは title="..." が関係していますが，alt="..." は省略できませんので，両方書いておけばいいでしょう。

奥村晴彦

Last modified: 2012-04-17 22:31:57