CSS的部份

img.ButtonImage
{
border: 0;
cursor: pointer;
padding: 0;
margin: 0;
}

JavaScript的部份(需配合jQuery使用)
var ButtonImage = {
imgs: {},
preloadImgs: function () {
var a = ButtonImage.preloadImgs.arguments;
var url;
for (var i = 0; i < a.length; i++) {
url = a[i];
if (typeof url === "string") {
if (!ButtonImage.imgs[url]) {
ButtonImage.imgs[url] = new Image;
ButtonImage.imgs[url].src = url;
}
}
}
},
start: function () {
jQuery.each($("img.ButtonImage"), function (key, val) {
with ($(val)) {
attr("out", attr("src"));
ButtonImage.preloadImgs(attr("out"), attr("over"));
mouseover(function () {
$(this).attr("src", attr("over"));
});
mouseout(function () {
$(this).attr("src", attr("out"));
});
}
});
}
};

$(document).ready(function () {
ButtonImage.start();
});

使用範例
<a href="/Menu06/index.htm">
<img src="/images/Menu06-A.png" over="/images/Menu06-B.png" class="ButtonImage" alt="" />
</a>

滑鼠移上去前使用 /images/Menu06-A.png 去顯示
滑鼠移上去前使用 /images/Menu06-b.png 去顯示
如果兩張圖的長寬不一樣的話
再多一層 div 做定位,垂直置中,水平置中