あるサイトのグローバルメニューの実装をお願いされました。
といってもCSSを使ったやり方は少々面倒なので、jQueryで何とかできないかと思い、googleで調べたところ、解決方法がこちらのブログに紹介されていました。 作者様に感謝。
さっそく説明どおり実装し、問題なく動作することを確認しました。爽快爽快・・・。

というわけで、自分用の備忘録。下記のコードを任意の名前で保存する（拡張子.js）　例:groll.js

function rollOver(){
var preLoad = new Object();
$('img.Over,input.Over').not("[@src*='_o.']").each(function(){
var imgSrc = this.src;
var fType = imgSrc.substring(imgSrc.lastIndexOf('.'));
var imgName = imgSrc.substr(0, imgSrc.lastIndexOf('.'));
var imgOver = imgName + '_o' + fType;
preLoad[this.src] = new Image();
preLoad[this.src].src = imgOver;
$(this).hover(
function (){
this.src = imgOver;
},
function (){
this.src = imgSrc;
}
);
});
}
$(document).ready(rollOver);

$('img.Over,input.Over').not("[@src*='_o.']").each(function(){

上記ソースの「_o.」の部分を用意した画像に合わせる

var imgOver = imgName + '_o' + fType;

上記ソースの「_o.」の部分を用意した画像に合わせる
ページの</head>より前に下記のような外部読み込みを設定

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="./jq/groll.js"></script>

ロールオーバーする画像を指定。例：glovalmenu01.gif　glovalmenu01_o.gif

<img src="./images/glovalmenu01.gif" class="Over" alt="" />