- ベストアンサー
イメージ(画像)の上に重ねたテキストを変化させたい
こんにちは。 質問させていただきます。 四角いイメージを配置し、その上にテキストを重ねて配置、 "開始ボタン"が押されたらタイマーを利用してカウントし、 そのカウントを１・２・３・４...とテキストを変化させて表示 したいのですが。。 テキストフィールドを使えば、出来るのですが、イメージ＆テキストでは、 うまくいきません。 こんな事は出来きないのでしょうか。。 よろしくお願いいたします。
- scr147
- お礼率66% (6/9)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
サンプルを作ってみました、ご参考に。 （カウントは、逆ですけど。） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>CountDown</title> <script type="text/javascript"> <!-- var IntervalID; var execCount; var Message = new Array("０","１","２","３","４") function Start(){ execCount=5;//繰りかえし実行回数 IntervalID=setInterval("update()",1000); } function update(){ if(0==execCount--){ clearInterval(IntervalID); } else { var text = document.getElementById("CountDown"); text.childNodes[0].nodeValue=Message[execCount]; } } //--> </script> </head> <body> <img src="image.jpg"><br> <span id="CountDown" style="position:relative;top:-1.3em;color:yellow">５</span> <button onclick="Start()">開始</button> </body> </html>
その他の回答 (2)
- 1200cc
- ベストアンサー率25% (1/4)
先ほどの補足を参考に書き直してみました。 ----- サンプル（JavaScriptの部分） ----- <script type="text/javascript"> function CountText(){ result.innerText = parseInt(result.innerText)+1; } setInterval("CountText()",1000); </script> ----- サンプル（JavaScriptの部分）終了 ----- ----- サンプル（HTMLの部分） ----- <FONT COLOR="FFFFFF"SIZE=+4 style="position:relative;top:25;left:55;"><TT><B id="result">1</B></TT></FONT> ----- サンプル（HTMLの部分）終了 ----- これでどうでしょうか？ ソースについての説明ですが 「result.innerText = parseInt(result.innerText)+1;」 result.innerText： "result"とはHTMLのサンプルに記述した<B>タグのことです（<B>タグの「id要素」に"result"と設定してあるのはこのためです）。"result.innerText"とは<B>タグで囲まれた内容のテキストのことです。最初は"1"が入っていますよね。 parseInt(result.innerText)+1： parseInt()とは、引数（この場合"result.innerText"になります。最初は"1"が入っています）を数字に変換する関数です。parseInt()を使わず、そのまま"result.innerText+1"を実行してしまうと、結果が文字としての"1"に1を加えた"11"になってしまいます。これを防ぐための処理です。 補足ですが、<TT>タグも<B>タグもStyleSheetで代用が可能です（と言いますか、StyleSheetで記述したほうが好ましいとされています）。 最初からは難しいと思うので、慣れてきたら挑戦してみてください。
お礼
1200ccさん、BLUEPIXYさん ご丁寧なアドバイスありがとうございました。 おかげで何とか行けそうです。 またよろしくお願いいたします。 ありがとうございました。
- 1200cc
- ベストアンサー率25% (1/4)
具体的にどの様なコードを書いていらっしゃるのでしょうか？ とりあえずは想像力を膨らませて答えさせていただきます。問題となっている点は「テキストを変化させることができない」という点ですよね？IE限定ですがDHTMLの技術で「innerText」と「innerHTML」というプロパティがあります。 「innerText」はそのオブジェクトの内容をText形式で設定・変更するプロパティ 「innerHTML」はそのオブジェクトの内容をHTML形式で設定・変更するプロパティ です。 ----- サンプル ----- <html> <head> <script type="text/javascript"> <!-- var num = 1; function CountText(){ result.innerText = num; num++; } setInterval("CountText()",1000); --> </script> </head> <body> <span id="result"></span> </body> </html> ----- サンプル終了 ----- こんなのでどうでしょうか？ 見当はずれなことを言っていたらごめんなさい。
補足
1200ccさん ありがとうごあいます。 初心者なもので、うまく説明が出来ません。 テキストを表示している部分なのですが 指定できないのでしょうか？ デフォルトで"１"というテキストが表示されていて、 タイマーが動き出すと２．３．４と増えていく。 そのテキストは、↓です。 <FONT COLOR="FFFFFF"SIZE=+4 style="position:relative;top:25;left:55;"><TT><B>1</B></TT></FONT> このテキストを指定して、変化させたいと思っています。 よろしくお願いします。
お礼
BLUEPIXYさん、1200ccさん ご丁寧なアドバイスありがとうございました。 おかげで何とか行けそうです。 またよろしくお願いいたします。 ありがとうございました。