アクティブ画像があるフォントサイズ変更ボタン

質問

こんにちは。

javascriptで、フォントサイズを変更出来るようにしたいです。
「大」「中」「小」という3種類のボタンがあり、デフォルト状態を「中」に設定する予定です。
で、文字サイズを変更したいユーザーが「大」なり「小」なりのボタンをクリックすると文字サイズが変更できるようにしたいのですが、
そのときにそれぞれの文字サイズ変更ボタンのマウスオーバー時とアクティブ時（もし文字サイズの「大」を選んだのならば「大」のアクティブ画像）に画像を変えたいのです。

いろいろ探してはいるのですが、なかなか難しく困っています。。

どなたか方法や参考サイトなどをお教え頂けませんでしょうか。

どうぞよろしくお願い致します。

回答No.3

think49 · ベストアンサー

> 文字サイズを大にした後、ページのリロードをすると文字サイズはそのままで、ボタン部分のみがデフォルトの中に戻ってしまうのです。。
> http://members3.jcom.home.ne.jp/granshe/example/081226/index.html
Cookieに設定を保存してはどうでしょうか？
ページ読み込み時にCookieを参照して、該当CSSを適用すれば出来ると思います。

GETパラメータに保持させる方法もありますが、
もし複数のページ間で設定を保持したいとすると、リンク後のページでもパラメータを適用させるために、リンク書き換え処理が必要になって少し面倒です。

お礼

think49さま

諸事情により、御礼が遅れましたことお詫び申し上げます。
ご教授いただきました内容にて反映できました。

本当にありがとうございました！！

回答No.2

babu_baboo

//さらにイライラする？

せっかく、ほうほうをみつけたようなのですが、
もじのおおきさをかえるやつは、もうぶらうざにまかせたほうがよいとおもう。
むしろ、めじゃーなぶらうざの、もじのおおきさをかえられるほうほうを
おしえるような、ぺーじにゆうどうすると、こんごはそのひともしあわせになれる。
とおもう。

補足

babu_babooさま

こんにちは。
ご回答ありがとうございます！！

確かに仰る通りですね。
使う人にブラウザでもこんなにできるんだよという誘導をしてあげることこそ制作側が考えなくてはいけないことですね。

それでは、失礼します。

回答No.1

藤田 朋郎（@hujitomo）

どのようなコード（HTML や CSS や javascript)でフォントサイズを変更するのかがわからないので、具体的なサンプルは提示できませんが、基本的な考え方としてマウスオーバーの画像変更はスタイルシート（擬似クラス :hover ）を使えば簡単に実装できますし、アクティブ時の画像変更は DOM を用いてスタイルを変更してやるのが一番解り易いのではないでしょうか。

補足

hujitomoさま

早速のご回答ありがとうございます！！！

仰る通りです、スミマセンでした。
回答をいただくための説明になっていませんね。

文字サイズの変更については経験がなく構成などもつかめていませんでした。
で、下記URLにてご紹介頂いたように作ってみたところ、説明が大変わかりやすかったため文字サイズについては変更できるようになったのですが、
文字サイズを大にした後、ページのリロードをすると文字サイズはそのままで、ボタン部分のみがデフォルトの中に戻ってしまうのです。。
これを解消したいのですが、どうにもわかりませんでした。。。

http://members3.jcom.home.ne.jp/granshe/example/081226/index.html

お知恵を拝借できませんでしょうか。
どうぞよろしくお願い致します。