文字サイズ変更ボタン（大・中・小）でフォントサイズを調整します

jqueryとjquery.cookieを使って、CSSのclassを変更します。文字サイズはCSSでパーセンテージで記述しておきます。

ヘッダーで、jquery.jsとjquery.cookieと後述のfontsize.jsを読み込んでいます。
参考サイト＞＞＞フォントサイズを変える「大・中・小」ボタンを実装する方法

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script src="common/js/jquery.cookie.js"></script>
<script src="common/js/fontsize.js"></script>

[fontsize.js]JavaScript

jQuery(function($){
  //変数にクッキー名を入れる
  var history = $.cookie('fontSize'); 
  //適用する箇所を指定。今回は部分的に#test内のpに
  var elm = $('body');  
  //変数が空ならfontMを、空でなければクッキーに保存しておいたものを適用
  if(!history){
    elm.addClass('fontS');
    $('#fontS').addClass('active');
  }else{
    elm.addClass(history);
    $('#'+history).addClass('active');
  }  
  //ボタンをクリックしたら実行
  $('li','.mod_headerbox_size').click(function(){    
    //activeでないボタンだった場合のみ動作
    if(!$(this).hasClass('active')){      
      //現在activeのついているclassを削除
      $('.active').removeClass('active');      
      //クリックしたボタンをactive
      $(this).addClass('active');      
      //クリックした要素のID名を変数にセット
      var setFontSize = this.id;      
      //クッキーに変数を保存
      $.cookie('fontSize', setFontSize);      
      //一度classを除去して、変数をclassとして追加
      elm.removeClass().addClass(setFontSize);
    }
  });
});

HTMl

<div class="mod_headerbox_size">
<ul>
<li id="fontS"><span><img width="30" height="60" alt="小さいサイズ" src="common/img/size_s.jpg"></span></li>
<li id="fontM"><span><img width="30" height="60" alt="少し大きいサイズ" src="common/img/size_m.jpg"></span></li>
<li id="fontL"><span><img width="30" height="60" alt="大きいサイズ" src="common/img/size_b.jpg"></span></li>
</ul>
<!--mod_headerbox_size_end--></div>

CSS

/* fontsize
-----------------------------------------*/
.fontS { font-size: 75% }
.fontM { font-size: 85% }
.fontL { font-size: 95% }
 
 
/* mod_headerbox_size
-----------------------------------------*/
.mod_headerbox_size {
  width: 90px;
  position:relative;
  overflow:hidden;
}
.mod_headerbox_size ul {
}
.mod_headerbox_size ul li {
  float: left;
  width:30px;
  height: 30px;
  overflow: hidden;
}
.mod_headerbox_size ul li span {
  display: block;
  cursor: pointer;
}
.mod_headerbox_size ul li.active span {
  margin-top: -30px;
}
.mod_headerbox_size ul li span:hover{
    margin-top:-30px;
}