OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

onMouseと連続画像アニメの併用?

  • すぐに回答を!
  • 質問No.102249
  • 閲覧数141
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 64% (50/78)

 gifを使用せずにアニメを作ろうと考えています。
 最終的には、

 最初は普通の文字が書いてある画像があって、それにマウスを持って行くと徐々に文字の色が変化して、やがて特定の色になったところで止まる。もちろんマウスを離せば最初の文字色に戻る。

という機能を持ったJavaScriptのスクリプト(笑)が作りたいわけですが、いまいちよく分かりません。
 ちなみに、画像は既にアニメ用のものが8フレーム(つまり8枚)ほど用意してあります。そして、これが8種類あります。これらを各メニューとして、1画面に同時に使いたいわけです(つまり、リンク画像として)。

 他のサイトさんでそれを見てやりたくなったんですが、ソースを見ても何がなんだか。まだ初心者なので、かなり意味不明でした。
 どうか、よろしくお願いします。

PS 一応、画像ファイルURIは「./cg/pict_0.png」ということで。これが0~7まで8枚あるわけです。
通報する
  • 回答数1
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

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

  • 回答No.1
レベル7

ベストアンサー率 57% (12/21)

はじめまして。
setTimeout()を使うと簡単にできます。
がんばって下さい。

<A HREF="xxx.html" onMouseOver="mover(1)" onMouseOut="mout()">
<IMG NAME="im" SRC="./cg/pict_0.png" BORDER="0"></A>

としてJavaScriptは、

function mover(i) {
  if(i < 8){
    document.images["im"].src="./cg/pict_"+i+".png";
    i++;
    id=setTimeout("mover("+i+")",100); //1000で1秒:500で0.5秒
  }else{
    clearTimeout(id);
  }
}

function mout() {
  clearTimeout(id);
  document.images["im"].src="./cg/pict_0.png";
}
お礼コメント
Yuya_Tachibana

お礼率 64% (50/78)

 早速のご回答ありがとう御座います。試してみたら、見事にできました♪
 別なメニューも以下、

function mover(i,n) {
  if(n == 1) { name = "aaaa";images="im_1"; }
  if(n == 2) { name = "bbbb";images="im_2"; }

  if(i < 8) {
    document.images[images].src="./cg/names/"+name+"_"+i+".png";
    i++;




のように、引数を増やしてみたら1つのfunctionだけで複数の画像で実現できました。ばっちぐーです♪

 とても助かりました。どうもありがとうございました。
 またご厄介になるかもしれませんが、その時もどうかよろしくお願いします。
投稿日時 - 2001-07-11 14:12:05
-PR-
-PR-
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ