文字のサイズ変更について

質問

ホームページ作成初心者です。
javaにてホームページの文字サイズを制御しています。

Javaは

<script type="text/javascript"><!--
fsize = 12;
function sizesetpt(val){
document.body.style.fontSize = val + "px";
var tds=document.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){ tds[i].style.fontSize = val + "px"; }
}
//-->
</script>

という風に書いています。

HTML内に
<form action="">
<img src="image/small.gif" width="28" height="28" onclick=""sizesetpt(10)">
<img src="image/middle.gif" width="28" height="28" onclick=""sizesetpt(12)">
<img src="image/big.gif" width="28" height="28" onclick=""sizesetpt(14)"></form>
と書いています。
一応問題無く動いていますが、可能であれば

「今は小サイズの文字で見ていますよ」というのがわかるように
小サイズ表示になっている時には文字小のボタン画像を別の画像に変更したいと思っています。

（例）
白地に黒字の「小」ボタン（画像）を押す
↓
ページが文字小サイズ表記になる
↓
その時はボタンは黒地に白字の「小」ボタン（画像）になっている

そのような操作はできるのでしょうか？
もし出来るのであればやり方をお教え頂けると助かります。

イメージとしては以下のサイトのような感じです。
もっと複雑なjavaやCSSを使うのでしょうか？
http://www.n-kankyo.com/

よろしくお願いします。

回答No.1

LOHA

色々突っ込みどころはあるのですが、初心者ということですので、細かすぎる話はなるべく脇においておきたいと思います。

＞javaにてホームページの文字サイズを制御しています。

JavaとJavaScriptは全く異なる言語ですので、区別しておいたほうが良いでしょう。
今回は、JavaScriptが正解です。
略すとしたらJSならまぁ許容範囲ですが、Javaだと完全に誤解のもとになりますのでご注意ください。

＞<script type="text/javascript"><!--
＞fsize = 12;
＞...
＞</script>

ここも多くの問題点がありますが、とりあえずCSSを勉強することを推奨します。
そうすれば、無駄なコードも、推奨されない記述もなくなることでしょう。

＞<form action="">
＞<img src="image/small.gif" width="28" height="28" onclick=""sizesetpt(10)">
＞<img src="image/middle.gif" width="28" height="28" onclick=""sizesetpt(12)">
＞<img src="image/big.gif" width="28" height="28" onclick=""sizesetpt(14)"></form>

ここはHTMLの問題になりますが、formタグは用法として明らかに誤りです。
HTMLのタグには「意味」があって、使い方も決まっているということを意識されるとよいでしょう。

＞そのような操作はできるのでしょうか？
＞もし出来るのであればやり方をお教え頂けると助かります。

当然出来ますが、HTML・CSS・JavaScriptについて、もう少し勉強が必要かと思います。
＃HTMLとCSSとJavaScriptは三位一体なのです。

https://www.google.co.jp/search?q=%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%82%BA%E5%A4%89%E6%9B%B4+javascript

＞もっと複雑なjavaやCSSを使うのでしょうか？

出来る立場から言えば、そんなに難しくないです。
勉強すれば必ず出来ます。