画像を使わず、スタイルシートで指定するだけで、ロールオーバーボタン風のものが作れます。
Javascript を使った本物とはやはり差が有りますが、画像を使っていない分、反応は早くなります。
<html><head><title></title>
<Style type="text/css">
<!--
a:link.midori { color: #005500;
←文字の色を指定
background-color: #aaeeaa;
←枠の中の色を指定
text-decoration: none;
←リンク部アンダーラインの有無を指定
border:4px outset; padding: 2px 20px 2px 20px;}
←枠の太さ・形状・余白を指定
a:link.ao { color: #005500;
background-color: #aaaaee;
text-decoration: none;
border:4px outset; padding: 2px 20px 2px 20px;}
A:visited { color: #666666;
background-color: yellow;
text-decoration: none;
border:4px inset; padding: 2px 20px 2px 20px;}
A:active { color: #FF0000;
background-color: pink;
text-decoration: underline;
border:4px inset; padding: 2px 20px 2px 20px;}
A:hover { color: #FFFFFF;
background-color: red;
text-decoration: none;
border:4px outset; padding: 2px 20px 2px 20px;}
-->
</STYLE>
</head><BODY>
<DIV style="line-height:200%">
←行間を調整する
<A class="midori" href="aaa.htm">リンクサンプル</a>
<A class="midori" href="bbb.htm">リンクサンプル</a>
<A class="midori" href="ccc.htm">リンクサンプル</a>
<Br><A class="ao" href="dd.htm">リンクサンプル</a>
<Br><A class="ao" href="ee.htm">リンクサンプル</a>
<Br><A class="ao" href="ff.htm">リンクサンプル</a>
</DIV></body></html>