インラインJavaScriptでロールオーバー

なるべく更新の手間が省けて、JavaScriptの処理が遅いブラウザに負担をかけないロールオーバーは、画像を読み込む場所に直接JavaScriptを書くことだ、との話を聞いたので試しに実装してみた。

<a href=”index.html”><img src=”01_off.jpg” alt=”Home” onmouseover=”this.src=’01_on.jpg'” onmouseout=”this.src=’01_off.jpg'” onmouseup=”this.src=’01_off.jpg'” onkeyup=”this.src=’01_off.jpg'” /></a>

最後のonmouseupは、タッチ端末などマウスオーバーが動作しない環境でのチラつき(一瞬画像が消える)現象への対策。(そういえばWindows8のタッチパネルでマウスオーバってどうなるんだろう?)
それじゃあマウスオーバー用の画像でいいじゃないかと onkeyup=”this.src=’01_on.jpg としてみたが、一瞬のチラつきが見られたので onmouseup を使い、それだけだとバリデートエラーが出るので onkeyup を併記した。

Read More