HP作成中にJavaScriptで動く文字を作りたい

このQ&Aのポイント
  • HP作成中にJavaScriptを使用して動く文字を作りたいです。
  • 現在、HPを作成していますが、文字を小さくする方法がわかりません。
  • サンプルコードを試してみましたが、文字の大きさを小さくすることができません。どのようにすればできるのでしょうか?
回答を見る
  • ベストアンサー

HPで...。

今、HPを作成しています。 そこで、動いて止まる文字をJavaSpriptで作ろうと...。 下記の様なサンプルがあったのですが、これは文字の大きさを小さくできないのでしょうか。 ド素人なので、全くわかりません。 文字を小さくする方法を教えて下さい。 宜しくお願いします!! <SCRIPT LANGUAGE="JavaScript"> <!-- timerID=0; mylen=new Array(); mybun=new Array(); speed=50; tatekannkaku=20; yokokannkaku=17; kakidasiitiX=100; kakidasiitiY=50; mybun[1]="あいうえお。。。。。"; mybun[2]="かきくけこ。。。。。。。。。"; mybun[3]=""; mybun[4]=""; mybun[5]=""; mybun[6]=""; mybun[7]=""; mybun[8]=""; mybun[9]=""; mybun[10]=""; for(m=1;m<11;m++){ mylen[m]=mybun[m].length; } i=0; j=1; function mystts(){ if(i>mylen[j]){ j=j+1; i=0; } else{ i=i+1; mybuna=mybun[j].substring((i-1),i); document.all["sample"+j*100+i].innerHTML=mybuna; document.all["sample"+j*100+i].style.pixelTop=kakidasiitiY+tatekannkaku*j; document.all["sample"+j*100+i].style.pixelLeft=kakidasiitiX+yokokannkaku*i; } timerID=setTimeout("mystts()",speed); if(j>=11){ clearTimeout(timerID);} } //--> </SCRIPT>

質問者が選んだベストアンサー

  • ベストアンサー
  • grape16
  • ベストアンサー率55% (52/93)
回答No.2

このスクリプトの中で手っ取り早く文字の大きさを変えるには style.fontSize にフォントサイズを表す文字列を代入すればいいと思います。 例えば, document.all["sample"+j*100+i].style.fontSize="10pt"; とすればフォントの大きさが10ポイントになります。

sugasuga
質問者

お礼

なるほど!そんな方法もあるのですね! フォントサイズを変更する事ができました。 有難うございました。

その他の回答 (2)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

>ちなみに、これはどの部分へ入れればよいのでしょうか? 質問文のスクリプトと見比べて貰うと、どの行を修正したかはわかるとおもいますが。 そういう意味でないなら、私には、わかりませんです。

sugasuga
質問者

お礼

そうですよね...。 でも、きちんとサイズを変更することができました。 有難うございました。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

未確認のためよくわかりませんが、 mybuna=mybun[j].substring((i-1),i).fontsize(1); とかしてみたらどうでしょう。 fontsize(n)で n=1~7が指定できます。

sugasuga
質問者

補足

回答有難うございます。 ちなみに、これはどの部分へ入れればよいのでしょうか? ド素人の為、全くわかりません。。。。 教えて下さい。

関連するQ&A

  • カーソルからの泡操作

    カーソルから上に向けて泡を出すプログラムがあります. これを,上にではなく,ブラウザ上のある特定箇所に 泡を向かわせるには,以下のプログラムをどのように変更したらよいでしょうか? 教えていただけると,とても助かります. <SCRIPT language="JavaScript"> <!--// Image0=new Image(); Image0.src="awa.gif"; Amount=20; Ymouse=-50; Xmouse=-50; Ypos=new Array(); Xpos=new Array(); Speed=new Array(); rate=new Array(); grow=new Array(); Step=new Array(); Cstep=new Array(); nsSize=new Array(); ns=(document.layers)?1:0; WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight; (document.layers)?window.captureEvents(Event.MOUSEMOVE):0; function Mouse(evnt){ Ymouse=(document.layers)?evnt.pageY-20:event.y-20; Xmouse=(document.layers)?evnt.pageX:event.x; } (document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse; for (i=0; i < Amount; i++){ Ypos[i]=Math.random()*WinHeight-Ymouse; Xpos[i]=Xmouse; Speed[i]=Math.random()*10+1; Cstep[i]=0; Step[i]=Math.random()*0.1+0.05; grow[i]=4; nsSize[i]=Math.random()*15+5; rate[i]=Math.random()*0.5+0.1; } if (ns){ for (i = 0; i < Amount; i++){ document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+Image0.src+" name='N' width="+nsSize[i]+" height="+nsSize[i]+"></LAYER>"); } } else{ document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i = 0; i < Amount; i++){ document.write('<img id="si" src="'+Image0.src+'" style="position:absolute;top:0px;left:0px;filter:alpha(opacity=90)">'); } document.write('</div></div>'); } function MouseBubbles(){ var hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop; var wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft; for (i=0; i < Amount; i++){ sy = Speed[i]*Math.sin(270*Math.PI/180); sx = Speed[i]*Math.cos(Cstep[i]*5); Ypos[i]+=sy; Xpos[i]+=sx; if (Ypos[i] < -40){ Ypos[i]=Ymouse; Xpos[i]=Xmouse; Speed[i]= 6+Math.random()*3; grow[i]=4; nsSize[i]=Math.random()*15+5; } if (ns){ document.layers['sn'+i].left=Xpos[i]+wscrll; document.layers['sn'+i].top=Ypos[i]+hscrll; } else{ si[i].style.pixelLeft=Xpos[i]+wscrll; si[i].style.pixelTop=Ypos[i]+hscrll; si[i].style.width=grow[i]; si[i].style.height=grow[i]; } grow[i]+=rate[i]; Cstep[i]+=Step[i]; if (grow[i] > 24) grow[i]=25; } setTimeout('MouseBubbles()',10); } MouseBubbles(); //--> </script> [参考] http://hp.ms-factory.biz/javak_bubbles2.htm

  • JavaScriptでスライドショーを2箇所

    お世話になります。 http://bunjin.com/java/ こちらの「画像操作→スライドショーのように画像を表示する」を参考にして、 フェードインするスライドショーを2か所に表示させたいと考えています。 1か所なら上手くいくのですが、2か所目がエラーになってしまいます。 外部jsファイルに次のように記入し、 ------------------------------------------------------ // JavaScript Document var fade_speed = 10000; var fade_duration = 10; var image = new Array(); image[0] = '1.jpg';image[1] = '2.jpg';image[2] = '3.jpg'; var t; var j = 0; var p = image.length; var pre_load = new Array(); for (i = 0; i < p; i++) { pre_load[i] = new Image(); pre_load[i].src = image[i]; } function start_fade() { if (document.all) { document.images.photo2.style.filter="blendTrans(duration=fade_duration)"; document.images.photo2.filters.blendTrans.Apply(); } document.images.photo2.src = pre_load[j].src; if (document.all) { document.images.photo2.filters.blendTrans.Play(); } j = j + 1; if (j > (p - 1)) j = 0; t = setTimeout('start_fade()', fade_speed); } photo[0] = '4.jpg';photo[1] = '5.jpg';photo[2] = '6.jpg'; var t2; var j2 = 0; var p2 = photo.length; var pre_load = new Array(); for (i2 = 0; i2 < p2; i2++) { pre_load[i2] = new Image(); pre_load[i2].src = photo[i2]; } function start_fade2() { if (document.all) { document.images.photo3.style.filter="blendTrans(duration=fade_duration)"; document.images.photo3.filters.blendTrans.Apply(); } document.images.photo3.src = pre_load[j2].src; if (document.all) { document.images.photo3.filters.blendTrans.Play(); } j2 = j2 + 1; if (j2 > (p2 - 1)) j2 = 0; t2 = setTimeout('start_fade2()', 8000); } ------------------------------------------------------ htmlには <body id="top" onLoad="start_fade()"> <img src="1.jpg" name='photo2' /> <img src="4.jpg" name='photo3' /> のように記入しています。 後半の2か所目の指定がどこか足りない又は違うのではないかと思うのですが、 色々試してみても上手くいきません。 ご教授をお願いいたします。

  • いくつか用意したフラッシュ(.swfファイル)を切り替え表示したい

    フラッシュで作成した.swfファイルをいくつか用意し、ホームページ上で切り替わるように表示したいのですが、どなたか詳しい方、教えていただけないでしょうか? 画像の切り替えのソース(以下----部分)を利用してみたのですが、.jpgの部分を.swfに置き換えても、上手く表示されませんでした。 具体的に、ソースを記述していただけると、大変うれしいです。 都合のいい質問ですいません。 よろしくお願いします。 ------------------------------------------- <html> <head> <title></title> <script language="JavaScript"> <!-- var cnt = 0; var dat = new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg"); prLdImg= new Array(); for (i=0; i<dat.length; i++){ prLdImg[i] = new Image(); prLdImg[i].src = dat[i]; } function nextImg(){ var obj = window.document.all('myImg'); if(timerID){clearTimeout(timerID);} cnt++; cnt %= dat.length; obj.filters.revealTrans.Apply(); obj.src = dat[cnt]; obj.filters.revealTrans.Play(); var timerID = setTimeout("nextImg()",3000); } // --></script> </head> <body> <img id="myImg" src="img1.jpg" style="filter:revealTrans(duration=2,transition=12)" onClick="nextImg()"> </body> </html> -------------------------------------------

  • 画像の大きさ

    文字の横にちょっとした目印に1文字の大きさ程度の画像を表示させたいのですが、IEで文字のサイズを変更すると文字と画像がアンバランスになってしまいます。 文字の大きさを固定したくないと思っています。 単純に考えて、下のようなことができればと思っていますが、無理だと思っています。(???が埋まれば出来そうですが・・・) 参考になるサイトなどがありましたら教えてください。 <body> <img id="img" src="abc.gif" width="15" height="15" border="0" style="float:left;"><span>aaaaa</span> </body> <script> a = new Array("0.8","1.0","1.2"); if(??? == ???){i = 0;} else if(??? == ???){i = 1;} else if(??? == ???){i = 2;} document.getElementById("img").setAttribute('width',15*a[i]); document.getElementById("img").setAttribute('height',15*a[i]); </script>

  • 時間でlink, vlink, alinkの文字色変えたい

    時間で、文字色や背景を変更するスクリプトを使っています。 しかし、リンク文字(link, vlink, alink)の色が変わらないため、背景によっては見えにくい文字色となってしまいます。 リンク文字も同様に時間で変化させたいのですが、どのようにすれば良いでしょうか? お分かりの方がいらっしゃいましたら、ご教授お願い致します。(>_<) 使っているスクリプトは以下のような感じです。 -------------------------------------------- TimeH = (new Date()).getHours(); if (TimeH>=0 && TimeH<=12) {myBG="url(./xxxxx/bg_01.jpg)"; myBGcolor="#FF00FF"; myColor="#FFFFFF";} else if (TimeH>=13 && TimeH<=24) {myBG="url(./xxxxx/bg_02.jpg)"; myBGcolor="#00FF00"; myColor="#000000";} myOP = window.opera; myN6 = document.getElementById; myIE = document.all; if (myOP) myBR="O6"; else if (myIE) myBR="I4"; else if (myN6) myBR="N6"; else myBR=""; function bg1(){ if (myBR == "I4"){ document.all.bdy1.style.background = myBG; document.all.bdy1.style.backgroundColor = myBGcolor; document.all.bdy1.style.color = myColor; } else if (myBR == "N6" || myBR == "O6") { document.getElementById("bdy1").style.background = myBG; document.getElementById("bdy1").style.backgroundColor = myBGcolor; document.getElementById("bdy1").style.color = myColor; } } <BODY ID=bdy1 onload="bg1()">

  • イベントが初めの一回しか起きません

    JavaScriptを勉強し始めて何とか自分のホームページに使いたいのですが、以下のプログラムをonClickイベントハンドラで動かせたいのですが、初めの一回のみ動き、その後クリックしても動きません。やはり作り直した方がいいのでしょうか。 var timerID; var ichi = 68; var maxX = 120; var perX = 2; speed = 10; function layerMv(){ if(ichi<maxX) { ichi += perX; if(document.all){ var data = document.all('S1').style; data.visibility = "visible"; data.left = ichi; } if(document.layers){ var data = document.layers['S1']; data.visibility = "visible"; data.left = ichi; } timerID = setTimeout("startMv()",speed); }else if(ichi==maxX){ clearTimeout(timerID); } } 他のボタンonMouseoverで初期位置(68,y)に通常のレイヤー移動。 その後動かなくなります。 どうかよろしくお願いします。

  • java詳しい方宜しくお願いします。

    <!--HPB_SCRIPT_CODE_40 function _HpbShowObj(lId) { var ob;ob=new Array; var appVer=parseInt(navigator.appVersion); var isNC=false,isN6=false,isIE=false; if (document.all && appVer >= 4) isIE=true; else if (document.getElementById && appVer > 4) isN6=true; else if (document.layers && appVer >= 4) isNC=true; if (isNC) { w_str = "document." + lId;ob[lId] = eval(w_str); if (!ob[lId]) ob[lId] = _HpbFindHiddenObj(document, lId); if (ob[lId]) ob[lId].visibility = "show"; } if (isN6) { ob[lId] = document.getElementById(lId); ob[lId].style.visibility = "visible"; } if (isIE) { w_str = "document.all.item(\"" + lId + "\").style";ob[lId] = eval(w_str); ob[lId].visibility = "visible"; } } function _HpbFindHiddenObj(doc, lId) { for (var i=0; i < doc.layers.length; i++) { var w_str = "doc.layers[i].document." + lId; var obj;obj=new Array; obj[lId] = eval(w_str); if (!obj[lId]) obj[lId] = _HpbFindHiddenObj(doc.layers[i], lId); if (obj[lId]) return obj[lId]; } return null; } //--> </script> これは何をするスクリプトでしょうか? ぜひご教授下さいませ。

    • ベストアンサー
    • Java
  • 文字を一文字ずつ表示

    JavaScriptで文字を一文字ずつ表示するサンプルを見つけ、使おうとしたところdocument.allが使われていた為、ネスケで対応できない事が分かりました。ネスケ4.7で対応するようにするにはどのように変えたらいいのか教えて頂きたく宜しくお願いいたします。 <SCRIPT Language="JavaScript"> <!-- var msg="Welcome!!"; i=0; function Start(){ if(i<=msg.length){ if(document.all){ myText.innerHTML = msg.substring(0,i); }else if(document.layers){ document.myText.document.open(); document.myText.document.write(msg.substring(0,i)); document.myText.document.close(); } i=++i; setTimeout("Start()",200); }else{ i=0; setTimeout("Start()",1000); } } // --> </SCRIPT> </HEAD> <BODY onLoad="Start()"> <DIV id="myText"></DIV> </BODY> 宜しくお願い致します。

  • お詳しい方どうぞ宜しくお願い致します。

    <!--HPB_SCRIPT_CODE_40 function _HpbShowObj(lId) { var ob;ob=new Array; var appVer=parseInt(navigator.appVersion); var isNC=false,isN6=false,isIE=false; if (document.all && appVer >= 4) isIE=true; else if (document.getElementById && appVer > 4) isN6=true; else if (document.layers && appVer >= 4) isNC=true; if (isNC) { w_str = "document." + lId;ob[lId] = eval(w_str); if (!ob[lId]) ob[lId] = _HpbFindHiddenObj(document, lId); if (ob[lId]) ob[lId].visibility = "show"; } if (isN6) { ob[lId] = document.getElementById(lId); ob[lId].style.visibility = "visible"; } if (isIE) { w_str = "document.all.item(\"" + lId + "\").style";ob[lId] = eval(w_str); ob[lId].visibility = "visible"; } } function _HpbFindHiddenObj(doc, lId) { for (var i=0; i < doc.layers.length; i++) { var w_str = "doc.layers[i].document." + lId; var obj;obj=new Array; obj[lId] = eval(w_str); if (!obj[lId]) obj[lId] = _HpbFindHiddenObj(doc.layers[i], lId); if (obj[lId]) return obj[lId]; } return null; } //--> </script> これは何をするスクリプトでしょうか? これはテンプレートに記述されていたコードで 何のために必要か知りたかったので 一旦削除してサーバにアップしてみたのですが きちんと表示されていて問題なさそうでした。 すみませんがぜひご教授下さいませ。 宜しくお願い致します。

  • document.write以外の方法での記述法

    javascript無知識なのですが 諸事情により下記のjsをdocument.write以外の方法で記述しなければならないのですが document.write以外の記述で同じ効果が得られる記述法ってないのですか? あればご教示よろしくお願いします。 <script language="javascript"> <!-- function rotationAdv() { m = 0, x = 0, y = 0; ad = new Array(); adv = new Array(); hit = new Array(); hit[0] = 1; adv[0] = 'A'; hit[1] = 1; adv[1] = 'B'; hit[2] = 1; adv[2] = 'C'; for(i=0; i<=hit.length - 1; i++) { m += hit[i]; } n = Math.floor(Math.random() * m); n++; for(i=0; i<=hit.length - 1; i++) { x = y; y += hit[i]; if(x<n && n<=y) ad = adv[i]; } document.write(ad); } rotationAdv(); //--> </script>