キーワード†

• HTML/JavaScript
• img
• Image

現象†

次の状況でうまくいかない。

1. XXX_off.png を初期表示
2. XXX_on.png をpreload(先読み)
3. 画像を読み込めない状況にする
4. mouseover で XXX_off.png を XXX_on.png に切り替えて表示
5. mouseout で XXX_on.png を XXX_off.png に切り替えて表示

うまくいかないのは 5. のところ。つまり元の画像に戻すところ。

少なくともIE8ではだめ。

原因†

JavaScriptで切り替える画像はJavaScriptでpreload(先読み)する必要があるくさい。

参考サイト(画像のプリロード（先読み）)で「ここでプリロードした画像はJavaScriptで表示させる必要があります。」とあるが、どうやら逆もそうらしい(と思える動作をする、IE8が)。

従って、初期表示している画像をpreload(先読み)しないと mouseout のタイミングで画像が消えていく。

対策†

初期表示している画像をpreload(先読み)する。

1. XXX_off.png を初期表示
2. XXX_off.png をpreload(先読み) ← ここ
3. XXX_on.png をpreload(先読み)
4. 画像を読み込めない状況にする
5. mouseover で XXX_off.png を XXX_on.png に切り替えて表示
6. mouseout で XXX_on.png を XXX_off.png に切り替えて表示

参考†

• http://lion.zero.ad.jp/inn/js/image/image-preload.html