マウスオーバーでランダムに赤,緑,青,黄の画像に切り替わる.マウスアウトで元の画像に戻る.

必要な設定

randomSwapImage関数はonMouseOverでランダムに画像を切り替える処理を行う,さらにonMouseOutで元の画像に戻す処理を行う.この二つの処理の分岐先は引数の数で決定している.

画像がランダムに切り替わるが,onMouseOutで元の画像に戻すため,その元の画像のパス(この場合,./images/web-148s.jpg)をどこかに記憶しておく必要がある.この画像パスは直接ユーザがプログラムに書いてもいいが,手間を省くため自動で記憶させている.記憶場所はimgタグそのものにbaseSrcプロパティを追加し,そのプロパティの値に記憶させている.記憶するタイミングは最初のマウスオーバー時.

画像提供 : PhotoBox YAS
戻る ]