クリック後、アニメーションを表示してからリンクさせるには？

質問

質問の仕方が難しいのですが・・・

自分のＨＰに使うメニューボタンを作っているのですが、
(1)ボタンをクリックするとそのボタンのアニメーションが表示され、アニメーションが終わった後に他のページを表示させる
(2)ボタンをクリックすると指定した画像のアニメーションが表示され、アニメーションが終わった後に他のページを表示させる

とゆうことがしたいのですが・・・できるのかどうかもわかりません。
もしやり方を知っている方がいれば、(1)(2)のどちらかでもいいので教えてください。

回答No.2

chupark

再び登場しました^^

　今回実現したい内容はだいたいわかったのですが、JavaScriptでは難しいかもしれません。
　特にアニメーションGIFが"終わる時点"というものを判定するのが困難かと思います。

　ボタンとしている画像をクリックしたときにアニメーションを入れ替えることはJavaScriptでもよく使われる手だと思いますので実現可能だと思います。

　<img src="a.gif" name="button" onMouseClick="GifChange">としておいて、

JavaScript部分は
function GifChange(){
document.button.src="b.gif";
}

　のような感じでできると思います。(JavaScriptは久しぶりなのであまり自信がありませんが^^;)

　あとは、アニメーションが終わったら、じゃなく、クリックして数秒後に　などの条件でならページを飛ばすこともできると思います。

　他のページへ飛ばせるには(例はあくまでページを移動するだけ)
function JumpPage(){
location.href="http://www.yahoo.co.jp/";
}
　のような感じでよかったかと^^;

　ちなみに、Flashがあればもっと確実・簡単に仰ることは実現できます。

お礼

たびたびありがとうございます＾＾

なるほど・・・
そのJavaScriptでやってみます。

ありがとうございます★

回答No.1

chupark

Flashがあればどちらも実現可能だと思います。
　JavaScriptでもある程度できるかもしれません。

　FlashはFlashのソフトをおもちでないと作ることはできません。

　JavaScriptはHTMLに埋め込んで書けば他にソフトはいりませんが、もう少し具体的にやりたいことを書いて頂かないとなんとも回答しがたいかと思います。

お礼

素早い回答ありがとうございます。

ええと・・・
JavaScriptなら多少わかりますが、
Flashの知識は全くゼロであります。
ので、Flashのソフトも持っていないと思います・・・

やりたいこと、を具体的に言いますと、
(1)リンクボタンとして、
　　(a)ボールがバウンドするアニメーションgih
　　(b)ボールが転がるアニメーションgif
　の、2枚の画像を使って、
　(a)のリンクボタンをクリックすると(a)が(b)に変わ　り、(b)のアニメーションが終わったところでリンク　先のページを表示させる。

(2)リンクボタンとして、
　　(a)ボールがバウンドするアニメーションgih
　を使い、
　(a)のリンクボタンをクリックすると、
　　(b)ボールが転がるアニメーションgif
　が(a)とは別の場所に表示され、(b)のアニメーショ　ンが終わったところでリンク先のページを表示させ　る。

ということがしたいのですが・・・できますでしょうか？
説明がわかりにくかったらごめんなさい。