netもんスター - 7-1：フォントサイズをユーザ側で切り替え

7-1：フォントサイズをユーザ側で切り替え

2006/12/08 金曜日 00:59:19 JST

テンプレートにJavaScriptでCSS切り替え機能を付加しました。ニュースのページにも書きましたが、下記のサイトからフリーのコードを入手して組み込みました。

A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets

それはスムーズに動くのですが、ブラウザ(FireFox)でJavaScriptエラーがでます。
Error: a.getAttribute("rel") has no properties 14
一応、自分で解決できるかどうか、コードを見ましたが、さっぱりわかりませんでした。で、エラーコードとスクリプト名でGoogleしてみると、

下記サイトが見つかり、

gemal.dk - The use of W3C standards in Denmark

無事、解決の運びとなりました。幸せな気持ち。デンマークの人達は親切な方が多いのでしょうね。修整したコードをアップされている方なんかおられて、日本人の私も非常に救われます。下記に修正箇所３カ所のみ、引用させてもらいます。

styleswitcher.js の変更点

４行目

if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {

を

if(a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {

１４行目

if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");

を

if(a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");

２２行目

if(a.getAttribute("rel").indexOf("style") != -1

を

if(a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1

さて、機能したものの、自分のサイトへ利用するためには、外観も重要な要素です。人それぞれの好みはともかく、私なりの好みでCSS切り替えボタンには、マウスオーバーで画像を切り替えたい。という強い欲求があるので、下記のようにしました。

この２行はCSS切り替えとは無関係に読み込まれています。

-------- ここは、Working With Alternate Style Sheetsのとおりですが、独立した各CSSを切り替えるのではなく、インポートして変化させる要素のみ上書きするようにCSSを切り替えてます。ご覧の通り、今のところまったく、印刷用CSSは考慮されていません。すみません。

--------
下記は、必要なJavaScriptを読み込んでます。ここまでがヘッダ部です。

ボタン部分はテーブル内に下記と同様に並びます。画像要素内にidとnameが両方ありますが、日本一頑固な文法チェッカー「Another HTML-lint」でidとnameを併記するように指導されておりますため、これを守っております。（本サイト内では教えを守りきれていない部分が多いですが…）簡略化して、name指定だけでも動きます。また、onclickとonkeypressも同様の理由で併記しております。簡略化してonclickだけでももちろん動きます。

<td><img id="csssw1" name="csssw1" xsrc="<?php echo $mosConfig_live_site; ?>/templates/nms_pottery_white2/images/fdefault_of.png" alt="wide-frame" height="27" width="22" onmouseover="imgon(this.name, 'csssw1')" onmouseout="imgof(this.name, 'csssw1')" onclick="setActiveStyleSheet('defaultnmscss'); return false" onkeypress="setActiveStyleSheet('defaultnmscss'); return false" /></td>

これに対応するJavaScript部は、下記です。（画像ファイルへのパスは省略しています。）非常に単純です。一応、画像切り替えスクリプトはGPL配布用にも同じ物を組み込むつもりなので、フリーでもGPL以外のライセンスで配布されているものや書籍のままというわけにもいかず、自分でひねくり回して作った物です。２つの配列と２つのファンクションでマウスオーバー時とマウスアウト時に画像を指定し直しています。これなら、時間がたっても理解がたやすいのでCSSの追加作業もしやすくなり、私のようなコードも外国語も苦手な者は特にスクリプトとテンプレートを書き直す際の重圧が軽減される（はず）、でしょう。（後はやる気の問題が残りますが…）（いや単にスマートなコードが書けないだけ）

if (document.images) {
   var on= new Array();
   on["csssw1"] = new Image(27, 22);
   on["csssw1"] .src = "fdefault_on.png";
   var of = new Array();
   of["csssw1"] = new Image(27, 22);
   of["csssw1"] .src = "fdefault_of.png";
}
function imgon(name, imgnam) {
   if (document.images) {
           document.images[name].src = on[imgnam].src;
           return true;
       }
}
function imgof(name, imgnam) {
   if (document.images) {
           document.images[name].src = of[imgnam].src;
           return false;
       }
}

最終更新日 ( 2006/12/08 金曜日 22:20:05 JST )

< 前へ

[ 戻る ]

RSS配信

MODx試験運転中