フォント用javascriptの、[小][中][大]という箇所を、画像ボタンに置き換えたい

質問

HP作成の初級者です。
宜しくお願いいたします。

ブラウザ上で、ユーザーがフォントサイズを変更できるjavascriptを導入してみました。
[小][中][大]というテキストが現れ、それらを押すことでブラウザのフォントを拡大縮小できます。
設置、動作とも成功していて、大変快適です。

さて、ここからですが、
私のダウンロードしたデフォルト状態の
[小][中][大]
を、画像（ボタン画像）に変更したいのです。

すでにボタン画像は用意しました。通常、マウスオーバー、アクティブ時、計９種用意しています。

問題は、設置方法です。

これが通常の画像挿入であれば分かるのですが、

この場合の、
javascriptと連動した場合の画像設置や、ロールオーバー指定が分かりません。

お詳しい方、できればHTMLで、お教えください。
宜しくお願いいたします。

-----今スクリプト内はこんな感じです。全文ではないですが、この辺と思われる部分を抜粋しました。---------
～～
～～…

document.writeln([
'<p id="' + id + '">文字：
<a href="javascript: void(0);" id="' + id + '-small" title="文字を小さくする（84％）">[小]</a>
<a href="javascript: void(0);" id="' + id + '-medium" title="文字を標準に戻す（100％）">[中]</a>
<a href="javascript: void(0);" id="' + id + '-large" title="文字を大きくする（120％）">[大]</a>
</p>',
].join("\n"));
Event.observe($(id + '-small' ), 'click', this.onClickSmall.bind(this));
Event.observe($(id + '-medium'), 'click', this.onClickMedium.bind(this));
Event.observe($(id + '-large' ), 'click', this.onClickLarge.bind(this));
},
onClickSmall: function(e) { this.change('84%' ); },
onClickMedium: function(e) { this.change('100%'); },
onClickLarge: function(e) { this.change('120%'); }

…～～
～～
-------------------------------------------------------------------------------------------------------
いろいろ、分からない点が多いので、未熟な質問で
見当違いをしているかも知れませんが、
どうぞ宜しくお願いいたします。

回答No.2

noname#105044

画像を普通に使うならmetametamuさんの言われた方法でいいと思います。
オールーオーバーにする場合は、いろいろありますが簡単な書き方だと

<img src='通常表示される画像' onmouseover="this.src='マウスが画像の上に乗ったとき使用する画像'" onmouseout="this.src='マウスが画像から外れたとき使用する画像（通常と同じ）'" />

これでいけると思います。

お礼

ご回答有難うございました！
onmouseoverやonmouseoutの記述があるのですね。
普段ソフトに頼っているので、大変参考になりました。
有難うございます。

回答No.1

noname#83877

<a href="javascript: void(0);" id="' + id + '-small" title="文字を小さくする（84％）">[小]</a>
<a href="javascript: void(0);" id="' + id + '-medium" title="文字を標準に戻す（100％）">[中]</a>
<a href="javascript: void(0);" id="' + id + '-large" title="文字を大きくする（120％）">[大]</a>

上の部分を少し見やすくすると

<a href="">[小]</a>
<a href="">[中]</a>
<a href="">[大]</a>

こんな風にボタンになるので、

<a href=""><img src="#" alt="小"></a>
<a href=""><img src="#" alt="中"></a>
<a href=""><img src="#" alt="大"></a>

中にimgタグを入れてやるだけです。

お礼

早速のご回答有難うございました！
大変参考になりました。
上のように書いていただけたので
大変分かりやすかったです。