- ベストアンサー
クリック操作でサイトの文字の大きさを変える方法
yyr446の回答
- yyr446
- ベストアンサー率65% (870/1330)
最近HTMLのカテゴリーで回答した例があるのでご参考に、 http://okwave.jp/qa/q5889343.html
関連するQ&A
- 文字サイズ変更ボタンでサイズが思うように制御できません
文字サイズ変更ボタンを配置して、下記のhtmlで大中小に変えられるようにしています。 <div><a id="fsize_l" onclick="document.body.style.fontSize='130%'" href="javascript:void(0);"><img src="../../images/b_fsize_l.jpg" alt="文字サイズ 大" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='100%'" href="javascript:void(0);"><img src="../../images/b_fsize_m.jpg" alt="文字サイズ 中" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='70%'" href="javascript:void(0);"><img src="../../images/b_fsize_s.jpg" alt="文字サイズ 小" width="29" height="25" /></a></div> 元々の文字サイズは％で制御しているのですが、大→中（＝標準）に戻した時、元々のサイズとは異なるサイズになってしまいます。 どうしてでしょうか？ 標準サイズを100％とし、中サイズも100％と記述しています。
- ベストアンサー
- HTML
- 文字サイズを変更できない
web制作していて、文字サイズ変更の機能をつけました。 * * * * * * * * * * * * * * * * <div id="fsize"> <div><a id="fsize_l" onclick="document.body.style.fontSize='large'" href="javascript:void(0);"><img src="../../images/b_fsize_l.jpg" alt="文字サイズ 大" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='small'" href="javascript:void(0);"><img src="../../images/b_fsize_m.jpg" alt="文字サイズ 中" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='x-small'" href="javascript:void(0);"><img src="../../images/b_fsize_s.jpg" alt="文字サイズ 小" width="29" height="25" /></a></div> </div> * * * * * * * * * * * * * * * * IEとfirefoxで確認したところ、問題なくサイズ変更されていたんですが、制作を進めていったら、いきなり変更しない箇所がでてきてしまいました。 全体のフォント指定はemでやっています。 何が原因なのでしょうか？ 言葉足らずな部分があるかもしれませんが、どうぞよろしくお願いします。
- ベストアンサー
- HTML
- 文字の大きさ変更
ページ全体の文字の大きさを変更できるボタンを設置したいと思い 検索で調べて柿のようなスクリプトを作ったのですが、 ＩＥ６だと反映されません。どうしてでしょうか？ （長くてすみません） <SCRIPT language="JavaScript"> <!-- var Default=3; var tags = new Array('div','td','tr'); var sizing = new Array('70%','80%','90%','100%','110%','120%','130%'); function FontChange(target,tarF){ if (!document.getElementById) return var dore = document,tarS = null,fontSize =Default,value,su,cTags; fontSize += tarF; if (fontSize < 0) fontSize = 0; if (fontSize > 6) fontSize = 6; Default = fontSize; if (!(tarS = dore.getElementById(target))) tarS = dore.getElementsByTagName(target)[0]; tarS.style.fontSize = sizing[fontSize]; for (value = 0 ; su < tags.length ; value++){ cTags= tarS.getElementsByTagName(tags[value]); for (su = 0 ; su < cTags.length ; su++) cTags[su].style.fontSize = sizing[fontSize]; } } //--> <a href="javascript:FontChange('body',1)"><img src="images/big.jpg" alt="" border="0" /></a> <a href="javascript:FontChange('body',-1)"><img src="images/small.jpg" alt="" border="0" /></a> それから出来ればボタン大中小で押せばサイズがそのサイズ で決まっているのだいいのですが、参考になるサイトは ないでしょうか？
- ベストアンサー
- JavaScript
- 文字の大きさを変更するjavascriptについて
文字の大きさを変更するjavascriptについての質問です。 現在以下のようなスクリプトを使用しているのですが、 IE６では動作しますがFirefox2.0では動きません。 原因、アドバイス等あればご指摘お願いします。 *****このスクリプトを外部ファイルとして読み込んでいます***** function larger(){ content_area.style.fontSize="14pt"; } function standard(){ content_area.style.fontSize="12pt"; } function smaller(){ content_area.style.fontSize="9pt"; } *********************************************************** *****head内の外部js読み込み部分***** <script type="text/JavaScript" src="common/js/fontsize.js"></script> ************************************ *****body内のjavascript呼び出し部分***** <ul> <li class="text_large"><a href="javascript:larger()">文字サイズ大</a></li> <li class="text_mid"><a href="javascript:standard()">文字サイズ中</a></li> <li class="text_small"><a href="javascript:smaller()">文字サイズ小</a></li> </ul> **************************************** よろしくお願いします。
- ベストアンサー
- JavaScript
- リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと 思っています。また対応するdivタグのdisplay属性も書き換えたいです。 とりあえず思いついたのは以下の方法なのですが、冗長ですし、 リンクの数が増えた場合に足していくのが大変です。 もっとシンプルに書く方法がないものでしょうか。 ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>
- ベストアンサー
- JavaScript
- 文字サイズ変更ボタンについて
大） onclick=\"document.body.style.fontSize=\'130%\' 中） onclick=\"document.body.style.fontSize=\'100%\' 小） onclick=\"document.body.style.fontSize=\'70%\' 上記のhtmlで文字サイズ変更ボタンを置いています。 動作は問題ないのですが、中を押した時に当初の大きさに戻したいのに、違うサイズになってしまいます。 解消するにはどうしたらよいのでしょうか？
- 締切済み
- HTML
- リンク元のファイル名を表示したい。document.referrerだとダメ。(ソース付き)
よろしくお願いします。 index.html→saki.htmlのようにリンクしてある、ファイルが２つあります。 saki.htmlの中で、リンク元のindex.htmlの名称を、document.referrerで表示しようとしています。 しかし、うまく動作しません。 何が違うのでしょうか？ ●index.html <html> <body> <a href="saki.html">AA</a> </body> </html> ●saki.html <html> <body> <script type="text/javascript"> <!-- document.write('<p>リンク元URL：' + document.referrer + '</p>'); // --> </script> </body> </html>
- 締切済み
- JavaScript
- 文字をオンマウスすると、画像がかわり、クリックで他のページへいくようにしたい。
初めてJavaを使いました。 『文字にマウスを当てると、上に置いた画像がかわり、さらにその文字をクリックすると、他のページにいくようにしたいのです』 文字にマウスを当てると、上に置いた画像が変わるとこまではできましたが、どうしても他のページへのリンクができません。 よい方法を教えてください。 作ったHTMLは以下のとおりです。 <SCRIPT language="JavaScript"><!-- function myChgPic(myPicURL){ document.images["myBigImage"].src = myPicURL; } // --></SCRIPT> <TABLE align="center"> <TBODY> <TABLE border="0" align="center"> <TBODY> <TR> <TD><IMG src="ankor.jpg" name="myBigImage" border="2"></TD> </TR> <TR> <TD><A href="javascript:void(0)" onmouseover="myChgPic('shanghai.jpg')">上海 <br> <A href="javascript:void(0)" onmouseover="myChgPic('italy.jpg')">イタリア <br> <A href="javascript:void(0)" onmouseover="myChgPic('canada.jpg')">カナダ </A> </TD> </TR> </TBODY> </TABLE> 上海、カナダ、イタリアという文字をクリックしたら、その写真にかわり、文字をクリックしたらそれぞれのページにリンクさせたいのです。
- 締切済み
- JavaScript
- リンククリックで文字列を他のフレームへ
リンクをクリックすると他のフレームにテキストを渡したい。現状はボタンクリックで渡しています。渡す文字は<SCRIPT language=JavaScript>の部分に書かず、リンクの場所においておきたい。 (例） <A HREF="">東京</A> <A HREF="">大阪</A> <A HREF="">名古屋</A> この文字の部分に 東京の名物、大阪の名物、名古屋の名物などのテキストを含ませておき、そことクリックすると別のフレームのテキストボックスに入るようにしたい。 ＃どうか、アドバイスを。 <form action="javascript:void(1)" onsubmit="return false;"> <p><input type=text name=Title value="やっほ"> <input type=button onclick="parent.Frame3.document.fm1.Title.value=this.form.Title.value;" value="←コピー">
- ベストアンサー
- JavaScript
- クリックごとに文字色が交互に変化する（赤青赤青赤青・・・・・）
クリックごとに文字色が変化するプログラムを作りたいのですがchangeColor()の部分の処理がうまく動作しません。おそらくif文の条件の表記が間違っていると思うのですが、どのように書き換えればいいのでしょうか？ <html> <head> <script language="JavaScript"> <!-- function changeColor() { if(event.srcElement.style.color="#ff0000")changeBlue(); else changeRed(); } function changeRed() { event.srcElement.style.color="#ff0000"; } function changeBlue() { event.srcElement.style.color="#0000ff"; } //--> </script> </head> <body > <table border="10" width="100" height="100" align="center" valign="top" bgColor="#ffffff"> <tr> <td><a href="javascript:void(0)"onClick="changeColor()"><font size="7">A</font></a></td> <td><a href="javascript:void(0)"onClick="changeColor()"><font size="7">B</font></a></td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
お礼
yyr446さん、ありがとうございます。 とても参考になりました。