文字の拡大縮小（外部ファイル）

0   名前： meico ： 2007/02/08（木） 23:27  ID:TYSqO2aG sub-Ax
こんにちは。javascripit初心者です。
よくわからずに行き詰まってしまったのでご質問させてください。。

ある一部分に対して文字の拡大縮小をしたいと思っています。
外部jsを使用しない場合はうまくいくのですが、scriptが長いため
できれば外部Jsで動作させたいと思っています。
外部Jsの記述内容は以下になります。

var fsize = new Array(12,14,16,18,20);
var fnum = 2;
var areaNum = 1;

function fsizeChg(num){

fnum += num;
if (fnum>4) fnum=4;
if (fnum<0) fnum=0;

if (document.all){
for (i=1;i<=areaNum;i++){
if (document.all["area"+i]){
document.all["area"+i].style.fontSize = fsize[fnum]+"px";
document.all["area"+i].style.lineHeight = "140%";
}
}
} else {
for (i=1;i<=areaNum;i++){
if (document.getElementById("area"+i)){
document.getElementById("area"+i).style.fontSize = fsize[fnum]+"px";
document.getElementById("area"+i).style.lineHeight = "140%";
}
}
}
}

これを「textsize.js」として同じ階層に保存し、
htmｌのhead部分に
<script src="textsize.js" type="text/javascript"></script>
と記述しました。

body部分に
<!------ 文字サイズ ＋− ------>
<p class="textsize">文字サイズ <a href="JavaScript:void(0);" onclick="fsizeChg(+1)"><img src="../images/plus.gif" alt="拡大ボタン" height="17" width="17" border="0" /></a> <a href="JavaScript:void(0);" onclick="fsizeChg(-1)"><img src="../images/mainasu.gif" alt="縮小ボタン" height="17" width="17" border="0" /></a></p>

と記述しまして。
文字の拡大縮小をさせたい部分に対して
<div id="area1">●●●●●</div>

としました。

根本的に何か違っているとは思うのですが、よくわかっていません。。

すみませんがもし詳しい方がいましたら教えてください！
よろしくお願いします
1   名前： 猫好き ： 2007/02/08（木） 23:27  ID:7Z/V9GV9 sub-2K
こんにちは。

どう「うまくいかない」のでしょうか？
試しにそのソースでやってみましたけど、問題なく動きましたが。
（IE6、ネスケ7、Firefox、opera）

動かない以外、うまく行かないことがあったのですか？
2   名前： meico ： 2007/02/08（木） 23:27  ID:TYSqO2aG sub-Ax
コメントありがとうございます！
ほ・・・ホントですか……！
＋−の画像を入れているのですが、そこをクリックしても何も変化がなかったのです。。。

たしかに、外部にしないとうまくできるのですが、外部にするとダメでした。

すみませんでした、再度チャレンジしてみます。ありがとうございます。
3   名前： meico ： 2007/02/08（木） 23:27  ID:TYSqO2aG sub-Ax
できました！！
原因はいまいちわかってないのですが…、すみません。

私はMac環境で作業しているのですが、外部ファイルのscriptをGoLiveで記述していたのを
内容は全く同じものですがJCheckerで作成しなおしてみたところ動作しました。。

猫好きさんありがとうございます！！
…関係ないですが私も猫好きです！
4   名前： 匿名 ： 2007/02/08（木） 23:27  ID:zI2A4Ka1 sub-Cz
> href="JavaScript:void(0);"

これのせいだった気がするけど。

全くの余談だが、ボタンを押すたびに領域内の全要素をなめるのは馬鹿馬鹿しいので、領域に class="area" を振っておいて
// initialize
var ss = document.styleSheets[0];
var i = ss.insertRule('.area { font-size: 14px !important; }', ss.cssRules.length);
var r = ss.cssRules[i];

onclick="r.style.setProperty('font-size', '18px', 'important'); "

とかやった方が早い……のだけど、Safari では反映されない。
一覧へ戻る