フォントサイズを変える「大・中・小」ボタンを画像も使って実装する方法
今回も以前にエントリーした内容の変更版。知人に「フォントサイズを変えるボタンを画像にして、アクティブなボタンを保持したい」という要望があったので、もらったソースを元に作ってみた
フォントサイズを変える「大・中・小」ボタン実装
CSSや文字だけで実装する場合は、以前の『フォントサイズを変える「大・中・小」ボタンを実装する方』を参照ください。
今回はこの機能に、画像の_onと_offを入れ替えるロールオーバーのスクリプトと、そのアクティブ状態を保持しているものを作成してみます。
※ロールオーバー部分は知人にもらったコードを改変して利用。出典不明。主な仕様も、前と同じまま。
今回作成したデモ
fontsize change - jsdo.it - share JavaScript, HTML5 and CSS
画像の場合の仕様ポイント
今回のポイントは画像のon,offの切り替え。CSSで行うだけの時は、classの切り替えで住んだのですが、画像の場合はsrcの値などを変化させたりする必要がある。鍛人にロールオーバー部分だけで利用するだけでなく、ボタンをクリックした時などにも必要になるので、この辺は工夫が必要なのかもしれない。
作ってて思う別の仕様
今回は画像を利用した部分を、onとoffの画像のsrcを変更して実現したのですが、おそらく今回のようなケースの場合、予めCSSにそれぞれの画像のonとoffを背景ボタンとしてセットしておいて、activeが付いているついていないで切り替えたほうがシンプル且つ簡単だったかもしれないと、作っていて思いました。
なので今回は、あくまでsrcを変更する場合のパターンとして見てください。また、今回のも、ざっくり作ってみただけなので、同じ画像切替にしてみても、もっとシンプル可能性はあると思います。ぜひ出来る方いましたらチャレンジしてみてください。
関連エントリー：
