マウスと連続画像アニメの併用:疑問と解答
- JavaScriptを使用して、gifを使用せずに連続画像アニメーションを作成しようとしています。
- 具体的には、最初は普通の文字が書かれた画像が表示され、マウスを移動させると文字の色が徐々に変化し、特定の色になったところでアニメーションが停止します。
- また、既にアニメ用の画像が8枚用意されており、それらをメニューとして1画面に表示したいと考えています。
- ベストアンサー
onMouseと連続画像アニメの併用?
gifを使用せずにアニメを作ろうと考えています。 最終的には、 最初は普通の文字が書いてある画像があって、それにマウスを持って行くと徐々に文字の色が変化して、やがて特定の色になったところで止まる。もちろんマウスを離せば最初の文字色に戻る。 という機能を持ったJavaScriptのスクリプト(笑)が作りたいわけですが、いまいちよく分かりません。 ちなみに、画像は既にアニメ用のものが8フレーム(つまり8枚)ほど用意してあります。そして、これが8種類あります。これらを各メニューとして、1画面に同時に使いたいわけです(つまり、リンク画像として)。 他のサイトさんでそれを見てやりたくなったんですが、ソースを見ても何がなんだか。まだ初心者なので、かなり意味不明でした。 どうか、よろしくお願いします。 PS 一応、画像ファイルURIは「./cg/pict_0.png」ということで。これが0~7まで8枚あるわけです。
- Yuya_Tachibana
- お礼率64% (50/78)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
はじめまして。 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"; }
関連するQ&A
- GIFアニメ画像の縮小
PHP4+MYSQLで、画像掲示板を作っています。 投稿された、画像のサムネイルを作る必要があり、JPG,GIF,PNGの画像の縮小は、できるようになったのですが、 GIFアニメを縮小させると、縮小されたファイルは静止画像になってしまいます。 アニメーションのまま、縮小させるにはどうすれば良いのでしょうか? 参考になるサイト等があれば、教えてください。
- 締切済み
- PHP
- onMouseOverでGIFアニメを指定すると…
どなたか教えてください。 onMouseOut時に輪郭のボンヤリしている画像を、onMouseOver時に徐々にクッキリさせたくて、再生1回のみのGIFアニメ(ほんの3コマ)にしたのですが、どうもうまくいきません。 最初(本当の一回目のみ)だけは、思い通りになるのですが、次からは、もうダメなのです。 マウスオーバーした途端、GIFアニメの最終コマが、一瞬あらわれてしまうのです。なんだか中途半端に点滅しているように見えてしまい、「徐々に」どころじゃなくなってしまうのです。ブラウザのキャッシュをカラにして、終了させ、もう一度立ち上げると、またうまく動作するのですが、それも第一回目のみ…。 これ(再生1回のGIFアニメを使うこと)は、無理なことなんですが? それとも、なにか方法があれば、ご存じの方教えてください。 よろしくお願いします。
- 締切済み
- JavaScript
- GDでのgifアニメ
gdでgifを出力したいのですが、 gifアニメはそもそも無理なのでしょうか? 例えば下記のようなソースで xxxx.gifがアニメでも、最初のフレームの 画像のみ出ます。 header ("Content-type: image/gif"); $im = imagecreatefromgif("xxxx.gif"); ImageGif($im); どなたかお教えいただけると嬉しいです。 宜しくお願いいたします。
- ベストアンサー
- PHP
- アニメgifのサムネイル画像の指定について
アニメgifのサムネイル画像の指定について 当方「Photoshop CS4」を使用してアニメgifを作成しております(OSはwindows XPです)。 アニメgifを保存する際についての質問なのですが、保存後にサムネイルとして表示される画像を、任意のフレームを指定して保存することはできるのでしょうか。 「WEBおよびデバイス用に保存」で保存すると、現在は強制的に先頭のフレームがサムネイルとして保存されている状態です。 それを、例えば3フレーム目の画像がサムネイルで表示されるように指定して保存をしたいと考えておりますがその様なことは果たして可能でしょうか。 様々な単語でググってみたのですがなかなか答えが見つからず、こちらで質問させていただいた次第です。。。 皆様のお知恵を拝借できますと幸いです。 何卒よろしくお願い申し上げます。
- 締切済み
- 画像・動画・音楽編集
- 画像のファイル形式の違いについて
画像のファイル形式って、たくさんあって、違いがよくわかりません。JPEG,TIFF,BMP,PICT,GIF,PNGって具合にほんとたくさんあって、困ってます。 それぞれがどのように違うのを教えてください。たぶん、圧縮の仕方が違うだと思うのですが。本とか、ホームページとかも教えてくれたら嬉しいです。
- ベストアンサー
- その他(インターネット・Webサービス)
- デコメール:アニメGIFや画像の貼り付け方
SH700iを使っています。アニメGIFや画像の貼り付け方が全くわかりません。 アニメGIF(何かキャラクターが踊っていました)は何かの弾みで一度できたきり、二度とできません。どうやって選んだのかも分かりません。 デコメールに撮影した画像を貼り付け(添付ではありません)ようとすると、画像に右上から左下に向けて水色の線が入っており画像を選択できないようになっています。 初心者なのでもうパニックです。 どうぞよろしくお願いいたします。
- ベストアンサー
- その他(スマートフォン・携帯・タブレット)
- JPGにオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのです
JPGにオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのです JPG にオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのですが、良い方法はありませんでしょうか? 例えば、分かれ道を撮したJPG画像に、マウスのカーソルを合わせる(載せる)と、JPG画像の上に、矢印だけが描かれた透過GIF画像、もしくは透過 PNG画像が表示されるようにしたいのです。 現在はJPG画像に矢印を書き加えたものを、onmouseoverで差し替え表示をする方法を行っていますが、書き加えられた矢印などの画像はJPG圧縮や縦横サイズの関係でノイズが載ってしまい、イマイチきれいじゃありません。 マウスの動作で透過GIF画像や透過PNG画像を重ねたり、外したりできる良い方法があればお教えください。
- 締切済み
- HTML
- ImageMagickで透過GIFアニメが変です
PHPでGIFアニメを作成しています。 PHP(元GIF作成)=>ImageMagick(GIFアニメに変換)という流れです。 背景を透過にして動きがあるものを作ってみると、以前のフレームの画像が 全て残ったようなアニメになってしまいます。まるで透明な紙に書いた パラパラマンガというような感じです。 原因追求の為、作成したGIFアニメをフレーム毎に分解してみると、 後に表示されるフレームには、それまでに表示されていたフレームの 画像が全て書き込まれていました。 また元画の背景透過を止めると、正しいアニメになり、作成したGIFアニメ の各フレームも正しい画像になっています。 背景を透過で作成したいのですが、どなたか解決策を教えて下さい。 ちなみに exec("/usr/local/bin/convert -dispose none -delay 20 image*.gif -loop 0 $path/animatedimage.gif", $err); という感じでアニメ化しています。
- ベストアンサー
- その他(プログラミング・開発)
- この画像を見てどう思いましたか? IX
この画像を見てどう思いましたか?のパート4です。 この2つの画像を見て、それぞれどう思いましたか?思った事を書いてみてください。 イ:http://domino.j.fiw-web.net/screen/mysbalscreen/mystia1.gif ロ:http://www5c.biglobe.ne.jp/~mataz/pict/t1.png イは前回の続き、ロは今回初めてお聞きします。
- ベストアンサー
- アンケート
- セル内のimageファイルをonMouse変える方法
縦横3列ずつの表の中心のセルにgifファイルを入れ、 その他のセルにある、リンクを貼り付けた文字にマウスを のせると、中心のgif画像がそれぞれ変わるというページを 作りたいのですが、わかりません。 セルの背景画像の変更は出来たのですが…。 どうすればよいでしょうか?
- ベストアンサー
- JavaScript
お礼
早速のご回答ありがとう御座います。試してみたら、見事にできました♪ 別なメニューも以下、 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だけで複数の画像で実現できました。ばっちぐーです♪ とても助かりました。どうもありがとうございました。 またご厄介になるかもしれませんが、その時もどうかよろしくお願いします。