この方法は、ハイライト用画像さえも作る必要がありません♪
<img>タグに、Javascriptをちょこっと書き足すだけです。
■SAMPLE:ただのボタン画像

ソース:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihhh-EW2C1LzWWxZ4Ibthqlkue28amzkSlq9tNYiyRscCcwGN4SkumU4bK1YO2AwinFG4_OP6oRsgUw8nS86aQhm9btUdFNzIkjWBns3LEr5cOPtRpOX1mmW8QLb4n31XyFa7gq7lzXg3u/s400/CapD20100313_2.jpeg" border="0">
■SAMPLE:簡単!ロールオーバー画像!

ソース:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihhh-EW2C1LzWWxZ4Ibthqlkue28amzkSlq9tNYiyRscCcwGN4SkumU4bK1YO2AwinFG4_OP6oRsgUw8nS86aQhm9btUdFNzIkjWBns3LEr5cOPtRpOX1mmW8QLb4n31XyFa7gq7lzXg3u/s400/CapD20100313_2.jpeg" border="0" onMouseOver="this.style.opacity=0.7;this.style.filter ='alpha(opacity=70)'" onMouseOut="this.style.opacity=1.0;this.style.filter ='alpha(opacity=100)'" >
◎作り方:
<img>タグに、以下2つの属性を混ぜています。
onMouseOver="this.style.opacity=0.7;this.style.filter ='alpha(opacity=70)'"
オンマウスで、薄くする(ハイライト)
onMouseOut="this.style.opacity=1.0;this.style.filter ='alpha(opacity=100)'" マウスが外れたら、元に戻す
できあがったら、imgタグを、aタグで挟んでリンクにすることで、重ねた時のカーソルが指マークに変わります。(または、style="cursor:pointer;cursor:hand" 属性をimgタグに追加してください)
これだけで初心者でも、スピードが求められるときでも、速攻で作れますね。
もちろん、CSS の hover属性を使っても同じように出来ますので、全体的に使うときはその方がすっきりします。