THE HAM MEDIA BLOG

フォントサイズを変える「大・中・小」ボタンを画像も使って実装する方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
Cookie
font
フォント
サイズ
Size

フォントサイズを変える「大・中・小」ボタンを画像で実装

今回も以前にエントリーした内容の変更版。知人に「フォントサイズを変えるボタンを画像にして、アクティブなボタンを保持したい」という要望があったので、もらったソースを元に作ってみた

フォントサイズを変える「大・中・小」ボタン実装

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を変更する場合のパターンとして見てください。また、今回のも、ざっくり作ってみただけなので、同じ画像切替にしてみても、もっとシンプル可能性はあると思います。ぜひ出来る方いましたらチャレンジしてみてください。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/211348099
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。