読者です 読者をやめる 読者になる 読者になる

フォントサイズ変更(代替スタイルシート変更)のjQuery plugin

http://d.hatena.ne.jp/kazuokohchi/20091109 で書いたように、fontsizeを変更するにあたってalternate stylesheetを使って変更するstyleswitcher.jsがあるがこれを元にjQuery pluginにしてみたもの。例のIEの問題も回避している。

http://www.miyagino.net/my/jquery.fontsize.js

例は以下。

<script type="text/javascript" src="jquery.fontsize.js"></script>
<link rel="alternate stylesheet" type="text/css" media="all" href="textsmall.css" title="Small Text">
<link rel="alternate stylesheet" type="text/css" media="all" href="textaverage.css" title="Average Text">
<link rel="alternate stylesheet" type="text/css" media="all" href="textlarge.css" title="Large Text">
<script type="text/javascript">
<!--
$(document).ready(function() {
        $("#fosize_area a").fontsize();
});
// -->
</script>
</head>
<body>
....
<div id="fosize_area">
  <a href="#" title="SmallText"><img src="IMG/fontsize_small_on.gif"
    id="SmallText" alt="小さい文字" title="小さい文字" width="20" height="24"></a>
  <a href="#" title="AverageText"><img src="IMG/fontsize_average_off.gif"
    id="AverageText" alt="中くらいの文字" title="中くらいの文字" width="26" height="24"></a>
  <a href="#" title="LargeText"><img src="IMG/fontsize_large_off.gif"
    id="LargeText" alt="大きい文字" title="大きい文字" width="26" height="24"></a>
</div>