• ベストアンサー

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

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

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

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

サンプルを作ってみました、ご参考に。 （カウントは、逆ですけど。） <!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>

scr147
質問者

お礼

BLUEPIXYさん、1200ccさん ご丁寧なアドバイスありがとうございました。 おかげで何とか行けそうです。 またよろしくお願いいたします。 ありがとうございました。

その他の回答 (2)

  • 1200cc
  • ベストアンサー率25% (1/4)
回答No.3

先ほどの補足を参考に書き直してみました。 ----- サンプル（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/
scr147
質問者

お礼

1200ccさん、BLUEPIXYさん ご丁寧なアドバイスありがとうございました。 おかげで何とか行けそうです。 またよろしくお願いいたします。 ありがとうございました。

  • 1200cc
  • ベストアンサー率25% (1/4)
回答No.2

具体的にどの様なコードを書いていらっしゃるのでしょうか？ とりあえずは想像力を膨らませて答えさせていただきます。問題となっている点は「テキストを変化させることができない」という点ですよね？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> ----- サンプル終了 ----- こんなのでどうでしょうか？ 見当はずれなことを言っていたらごめんなさい。

scr147
質問者

補足

1200ccさん ありがとうごあいます。 初心者なもので、うまく説明が出来ません。 テキストを表示している部分なのですが 指定できないのでしょうか？ デフォルトで"１"というテキストが表示されていて、 タイマーが動き出すと２．３．４と増えていく。 そのテキストは、↓です。 <FONT COLOR="FFFFFF"SIZE=+4 style="position:relative;top:25;left:55;"><TT><B>1</B></TT></FONT> このテキストを指定して、変化させたいと思っています。 よろしくお願いします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 中央に配置して上にテキストを置きたい

    dreamweaver8 を使ってホームページを作っています。 画像（中央に配置）の上にテキストを置きたいのですが、どのような方法がベストなのでしょうか？ 試してみたのは… １．背景として配置して上にテキストを置く。 でもこれだと、背景の画像が中央にいきません。 ２．画像をイメージとして配置 これだと、テキストが上に置けません。 画像を中央に配置して、かつ上にテキストを置けるようにするにはどうしたらいいのでしょうか？？ よろしくお願いします。

    • 締切済み
    • CSS
  • openoffice impressのテキストを上

    openoffice impressのテキストを上詰めに openoffice impressにテキストを配置しています。 現状、文字の詰め方が、縦方向中央になっているのを、上詰めに変更したいのですがやりかたが分かりません。 上揃えのボタンを押下してみたところ、テキストの枠そのものがレイアウト上の上に移動しました。 そうではなく、テキストの枠の中の文字を上詰めにしたいのです。

  • フレーム内のラベルやテキストフィールドなどを真っ直ぐ揃えたいのですが

    つい最近ＪＡＶＡのＳＷＩＮＧクラスとよばれるＧＵＩプログラムを勉強したばかりの人です。 現在ラベル３つとテキストフィールド３つを交互に並び、 フレームの中の下段に中央にボタンが２つあるようなフレームを作成したいです。そして、ボタンを押したらラベル４が表示されるようにするのが目標です。 ↓こんな感じです。 ----------------------------------- ラベル１　　　テキストフィールド１ ラベル２　　　テキストフィールド２ ラベル３　　　テキストフィールド３ 　　　　　(ラベル４(ボタン押したら表示)) ボタン１　　ボタン２ ------------------------------------- 単純にJLabelとJTextFieldを交互にソースに書いて getContentPane().add(p, BorderLayout.CENTER);と中央揃えに設定しても、ずれてしまいます。その上、仮にラベル１とラベル２の行の位置が上の場合でも、ラベル１または２の文字数でずれ込みます。 分からないことだらけですが、上のようにまっすぐ揃う方法をお教え下さい。

    • ベストアンサー
    • Java
  • CSSで２つの小さなテキストブロックを常に中央のバックグラウンドイメージ上に表示

    お世話になります。 CSSを使って、英語のサイトと日本語のサイトに入る入り口のページを作っています。バックグラウンドには幅750px高さ500pxのイメージを常に中央で、上から100pxのところに表示するようにしました。 バックグラウンドイメージ上にはほとんど表示するテキストがなく、左下幅200px高さ200pxの部分に日本語の入り口を多少のテキストと共に配置し、右下に同じサイズの英語の入り口を配置したいと考えているのですがどうも上手くいきません。bodyは以下のようにしてあります。#japaneseと #englishの中身をいろいろ試して見ましたがどうしても左に寄ってしまいます。良い方法がありましたらご教授お願いします。 body { text-align:center; width: 750px; height: 500px; color: #ffffff; background: url(images/sample.gif) no-repeat 0px 100px; background-position: center; } #english { } #japanese { }

    • ベストアンサー
    • HTML
  • テキストフィールド内で文字を足したり引いたりしたい

    今一つのテキストフィールドに複数のボタンから の文字を表示させています。 足すときは単純にボタンAの１フレーム目には on (release) { _root.key_text += "AAA"; } また、ボタンBの１フレーム目には on (release) { _root.key_text += "BBB"; } とし、ボタンA,Bが押されるとkey_textのJ表示は「AAABBB」 となります。 このkey_text内に「AAABBB」と表示された所から もう一度ボタンAを押すと"AAA"だけを抜き出しテキストフィールドの表示は「BBB」としたいのですができません。ボタンAの2フレームには on (release) { _root.key_text -= "AAA"; } と書いています。 しかし「AAABBB」と表示されたテキストフィールド"AAA"だけを引いてはくれずにテキストフィールドにはNaNと表示されてしまい。 ボタンBで追加した”BBB”までいっぺんに消えてしまいます。 ボタンのクリックごとに うまくテキストフィールド内の文字の同じ部分だけを 引くことは可能でしょうか？ どなたかわかるかたいましたらご教授していただけませんか おねがいします。

    • ベストアンサー
    • Flash
  • 外部から読み込んだテキストを切り替える方法

    １.外部テキストを読み込む ２.ボタン1、ボタン2、ボタン3をクリックすると、 　 テキストフィールドに表示される文字が 　 各1～3までの変数を読み込んで切り替わる。 　（ボタンの数と表示するテキストの数は同じ） …という内容をやってみようと考えてるのですが、 こちらは技術的に可能なのでしょうか？ 読み込む変数の数だけテキストフィールドは必要になりますか？ テキストファイルを個別に分けて切り替える…という手法は、 たくさんあったのですが、変数で切り替える方法がわからず、 どなたかご教授くださると助かります。

    • ベストアンサー
    • Flash
  • 外部テキストをボタンでの表示

    テキストフィールド内に外部テキストを読み込ませて表示しているのですが ボタンで同一フィールド内の外部テキストを別のテキストに切り替える方法は どうしたらよろしいでしょうか？ 急いでます。宜しくお願いいたします＞＜；

  • background-imageの配置

    御世話になります。 CSSにて下記画像のように『お問合せボタン』を配置したいと考えております。 左の写真の一番下のラインに合わせて配置したいんです。 お問合せボタンの上には商品説明が入るようなイメージです。 background-positionでは無理ですよね？ ご教授願います。 現在の設定↓ .go_form { display: block; background-image : url(../img/お問合せボタン.png); background-position: bottom right; background-repeat: no-repeat; text-align: left; text-indent: -9999px; }

  • ダイナミックテキストのボタン化

    いつもお世話になっております。 actionscript3.0でサイト制作を行なっております。 予めFLASH上で作成したダイナミックテキストフィールドに、 外部ファイルから読み込んだテキストを入れ、それをボタン(指マーク) にしたいと考えております。 テキストフィールドの為、useHandCursolやbuttonMode等のプロパティは 使えないと思いますので、予め作成したダイナミックテキストフィールドと 同じ大きさの透明なSPRITEをテキストフィールドの上に乗せておき、 それをbuttonMode = trueの処理でリンクとして扱う方法を考えましたが、 少々面倒だと感じました。 上記の方法以外にactionscript上で、ダイナミックテキストをボタンとして 変換するような方法は御座いますでしょうか？ 宜しくお願い致します。

  • テキストファイルの読み込み

    Flash超初心者です。 フィールドを上下に分けて下の部分にボタンをつけて、ボタンをクリックすると上の部分にテキストファイルの内容が表示されるようなものを作りたいと考えています。 環境はFlash liteです。 分からないことだらけなので詳しく教えていただけるとありがたいです。よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する