WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:一定時間の後にメッセージを表示したい

0:[投稿] 鈴川 [MAIL] [2005/06/14 20:36 ][環境:IE6 WinXp わからない]

こんばんは、お世話になっております。
「ここを押してください」との画面上の文字を押すと@A地点に5枚の絵が一定の時間の間隔(2秒間隔)で次々に出現し、終わったらAB地点に「お元気ですか」と画面にメッセージを出したいのですが、やり方がわかりません。

現在は、皆様のご協力でA「お元気ですか」のメッセージはでるように成ったのですが@のやり方とAに移る部分がわかりません。

どなたかご教授下さい。

ソースは下記の通りです。
よろしくお願いいたします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.2.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
<script language="JavaScript" type="text/JavaScript">
<!--
*********************************************出したい画像を格納
var SetImg = 1;
TbAnima = new Array();
for (i = 1; i < 6; i++) {
  TbAnima[i] = new Image();
  TbAnima[i].src = "gif/IMG" + i + ".GIF";
 }
 function ShowAnima(){
  document.anima01.src = TbAnima[SetImg].src;
  SetImg++;
  if (SetImg > 5 ) {
      SetImg = 1;
   }
 }
***************************************************
 function ShowAnima(){
  document.anima01.src = TbAnima[SetImg].src;
  SetImg++;
  if (SetImg > 5 ) {
      SetImg = 1;
   }
 }

function showWords(id){
   obj                = document.getElementById(id)
   obj.style.left     =  "50px";
   obj.style.width    = "650px";
   obj.style.height   = "100px";
   obj.style.fontSize = "16px";
   obj.style.top      =  "200px";
この部分で上記で格納した画像5枚を2秒単位で次々と表示し、終わったら
(10秒後か?)以下のメッセージを表示したい。
 setTimeout("ShowAnima()",10);

   obj.firstChild.nodeValue = "お元気ですか";
}
//-->
</SCRIPT>
<style type="text/css">
<!--
  .wordsBox {
    position   : absolute;
    top        : -1000px;
    left       : -1000px;
    z-index    : 1000;
    border     : 10px solid #FFFFFF;
    color      : #000000;
}
-->
</style>
</HEAD>
<BODY bgcolor="#FFFFFF">
<DIV style="top : 348px;left : 356px;
 position : absolute;
 z-index : 5;
" id="Layer3"><IMG src="gif/IMG0.GIF" name="anima01" alt="anima01" width="47" height="47" border="0"></DIV>

<DIV style="top : 211px;left : 181px;
 position : absolute;
 z-index : 9;
 width : 203px;
 height : 16px;
" id="Layer14"><A href="javascript:void(0);" onclick="showWords('wordsBox')">ここを押して</A><div class="wordsBox" id="wordsBox">dummy</DIV>
</DIV>
</BODY>
</HTML>


1:[回答] バギンズ [2005/06/15 02:40 ]

※function ShowAnima()が2つあるのは入力ミスかな?

まず、
onclick="showWords('wordsBox')"
 ↓
onclick="ShowAnima()"
に変更する。

function ShowAnima()の中の

 if (SetImg > 5 ) {
     SetImg = 1;
  }
   ↓
 if (SetImg > 5 ) {
     setTimeout("showWords('wordsBox')",2000);
  } else {
     setTimeout("ShowAnima()",2000);
  }
にする。

function showWords(id)の中の
setTimeout("ShowAnima()",10);
は外す。

以上。(動作確認していないので間違っていたらごめんなさい)

一定時間毎に処理を行い場合は、setTimeoutで次の処理に繋いでいくようにするのです。


2:[回答] 鈴川 [MAIL] [2005/06/15 11:11 ]

バギンズ さんありがとうございました。

バッチリもとめていた動作が!

有難うございました。これからもよろしくお願いいたします。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World