一昔前、Webページ上での画像のロールオーバー(画像の上にマウスポインタを重ねると画像が変わるアレです)にJavascriptが使われていましたね。でも、今は、Javascriptではなく、CSSで実現する方法が標準となりつつあります。
たとえば・・・

a      {background: url(xxx.jpg);}
a:hover{background: url(yyy.jpg);}

こんな感じですかね。IE6では、アンカータグ(<a>)しか対応してませんが、他のブラウザなら他のタグでも可能です。

で、ここで僕がはまったのが、ページに初めてアクセスしたとき、ロールオーバーさせる要素にマウスを持っていくと一瞬空白になってしまうんですよねぇ・・・。初めてページを表示させたときまだロールオーバーさせる画像が読み込まれていないのが原因で、解決方法は簡単、画像を先読みさせてブラウザのキャッシュに入れてしまえばいい。要するにプリロードさせればいい。んな、こたぁ、言われなくても分かるんです。

その方法は・・・頭の悪い僕では２つぐらいしか思いつきません・・・

1. javascriptを使って (new Image()).src = “yyy.jpg”; とかしておく。
2. HTML内に幅/高さを1にした<img>タグを書いておく。
3. 画像を一枚用意して、width,height,background-positionを駆使して切り分ける

無駄なタグを含める後者は論外。画像を一枚に・・・というのは新規につくるページだと最適ですが、既存の組みあがっているページとなると無駄に工数がかかってしまう。一番簡単にできそうなのは・・・やはりスクリプトで。・・・せっかくロールオーバー処理からJavascriptを排除したのに・・・（－－;;;
ブラウザの最適化処理で自動的に読み込んでくれれば問題ないんですけどね・・・。そもそも、css内にある画像は先読みしてほしい気もします。まぁ、無駄にメモリー消費が増えてしまう、パフォーマンスの問題も絡むので無理か・・・。

結局、

/**********************************************
  画像を読み込んでおく関数
  preload(画像1,画像2,....);
***********************************************/
function preload()
{
  var len = 0;

  if((len = arguments.length) <= 0)
    return;

   for(var i=0;i<len;i++)
    (new Image()).src = arguments[i];
}

preload('yyy.jpg','zzz.png');

とかやってしまうんだけど・・・。

う～ん・・・スクリプトを使わない上手いやり方はないものか・・・。