マウスオーバーイベントで画像を切り替える最も良い方法は何ですか？

Question

マウスオーバーイベントで画像を切り替える最も良い方法は何ですか？

私はマウスを自分のウェブページ上のオブジェクトの上に出して外に出すと、2つの画像を入れ替えたいと思う。

私は両方のケースのために知っていただきたいと思います： - CSS-背景に割り当てられた画像は、要素（画像のURLは、CSSファイルである） - 要素（画像のURLは、HTMLコードである）

私はを現在jQueryを使用しています。しかし、問題は、ロードする必要があるため、最初のロールオーバーイベントが発生したときに、2番目のイメージが常に少し遅れて表示されることです。

NB。私はすべてのブラウザと互換性のあるソリューションが必要です！ （IE 6-7必須ではありません。IE 8、Firefoxの、サファリ、クローム...）

おかげ

Answer 1

を読むことができます。

「両方」の画像は一度にダウンロードされるため、ユーザーに即座に表示されます。

Answer 2

あなたはこのような状況でCSS spriteを使用することができます。

また使用CSS spritesWhat are the advantages of using CSS sprites?

Answer 3

（clsImg1、clsImg2）のような2つのクラスを定義し、バックグラウンドにイメージを定義します。あなたは、あなたがこの方法を示す前に、jQueryを使って画像をロードしようとすることができます

Answer 4

と呼ばれるマウスオーバー、マウスアウトイベントしばらくクラス名を変更する必要があり ：http://stackoverflow.com：

$('img').attr('src', 'YOUR_IMAGE_PATH').hide().appendTo('html');