そのまんまです。
jQuery本体は読んでおいてください。
<script type="text/javascript">
jQuery(document).ready(function() {
$('img[src*="-off."]')
.on('mouseover', function(){this.src=this.src.replace('-off.','-on.');})
.on('mouseout', function(){this.src=this.src.replace('-on.','-off.');});
});
</script>あとは、マウスが乗ってない状態の時の画像の名前を「abcdef-off.jpg」乗ってる時の画像の名前を「abcdef-on.jpg」にすればオッケーです。
別にjpgである必要はないです。どの画像でもいけます。あとonとoffの画像の「abcdef」のところは合わせるようにしてください。
そこが違うと判別しないので。٩(๑•̀ω•́๑)۶