« 新書マップ | トップページ | ラムゼイ・ハント症候群 »

2008.03.12

JavaScriptで文字サイズを変更2

カレント表示対応版|styleswitcher.js

以前、「JavaScriptで文字サイズを変更」という記事を書きましたが、カレント表示(現在どのサイズで表示されているか)でつまずき、結局画像を使ったボタンにして、どのサイズで表示されているか?というコトが分からないサンプルを紹介しました。

実際に文字サイズを変更するような案件が出てきたコトもあり、何か対策がないものかと考えていると、灯台もと暗しというか何というか…、非常に簡単であるコトに気づきました。
styleswitcher.jsで読み込むalternate stylesheetにそれぞれのボタンの状態を記述すれば良いだけだったんですね。

…という訳でサンプルです。

↑このサンプルはこちらからダウンロードできます。

今回、「小 中 大」の文字も画像にしてしまったため、ソース上のテキストはdisplayプロパティで消してしまってますが、お好みに応じて変更してください。
注意する点といえば、a要素に正確な幅と高さを指定して、displayプロパティをblockに、cursorプロパティをpointerにしておくコトくらいでしょうか。
サンプルを参考にいろいろと試していただければと思います。

|

« 新書マップ | トップページ | ラムゼイ・ハント症候群 »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/40473006

この記事へのトラックバック一覧です: JavaScriptで文字サイズを変更2:

» JavaScriptで文字サイズを変更 [Good Sleep]
CSSを切り替えるJavaScript|styleswitcher.js ユーザビリティを考えると、文字の大きさを可変できるコトは必須だと思う。僕もCSSを組む時は、WindowsのIEでも文字サイズ [続きを読む]

受信: 2008.03.12 12:34

« 新書マップ | トップページ | ラムゼイ・ハント症候群 »