イメージ(画像)の上に重ねたテキストを変化させたい

解決済

質問者：scr147
質問日時：2005/03/18 13:45
回答数：3件

こんにちは。

質問させていただきます。
四角いイメージを配置し、その上にテキストを重ねて配置、
"開始ボタン"が押されたらタイマーを利用してカウントし、
そのカウントを１・２・３・４...とテキストを変化させて表示
したいのですが。。
テキストフィールドを使えば、出来るのですが、イメージ＆テキストでは、
うまくいきません。

こんな事は出来きないのでしょうか。。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： BLUEPIXY
回答日時：2005/03/18 14:38

サンプルを作ってみました、ご参考に。

（カウントは、逆ですけど。）
<!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">

</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>

- 0
- 件

通報する

この回答へのお礼

BLUEPIXYさん、1200ccさん

ご丁寧なアドバイスありがとうございました。
おかげで何とか行けそうです。

またよろしくお願いいたします。
ありがとうございました。

通報する

お礼日時：2005/03/18 18:47

No.3

回答者： 1200cc
回答日時：2005/03/18 17:30

先ほどの補足を参考に書き直してみました。

----- サンプル（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で記述したほうが好ましいとされています）。
最初からは難しいと思うので、慣れてきたら挑戦してみてください。

参考URL：http://www.zspc.com/stylesheets/

- 0
- 件

通報する

この回答へのお礼

1200ccさん、BLUEPIXYさん

ご丁寧なアドバイスありがとうございました。
おかげで何とか行けそうです。

またよろしくお願いいたします。
ありがとうございました。

通報する

お礼日時：2005/03/18 18:48

No.2

回答者： 1200cc
回答日時：2005/03/18 14:48

具体的にどの様なコードを書いていらっしゃるのでしょうか？

とりあえずは想像力を膨らませて答えさせていただきます。問題となっている点は「テキストを変化させることができない」という点ですよね？IE限定ですがDHTMLの技術で「innerText」と「innerHTML」というプロパティがあります。
「innerText」はそのオブジェクトの内容をText形式で設定・変更するプロパティ
「innerHTML」はそのオブジェクトの内容をHTML形式で設定・変更するプロパティ
です。

----- サンプル -----
<html>
<head>

<script type="text/javascript">

</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>

このテキストを指定して、変化させたいと思っています。
よろしくお願いします。

補足日時：2005/03/18 15:24

通報する