gifアニメの動作が変わった

このQ&Aのポイント
  • 3週間前に制作したサイトで、マウスオーバーでgifアニメに変わるメニュー画像の動作がおかしくなっている。
  • firefoxとsafariで確認したが、画像が元に戻らない。
  • 原因は不明で、HTMLの記述ミスかもしれないと考えている。
回答を見る
  • ベストアンサー

gifアニメの動作が変わった

3週間程前、サイトを制作していました。 メニュー画像をマウスオーバーでgifアニメに替え、マウスアウトで元画像に戻すということをやっていました。 htmlの記述は下記の通りです。 <a href="explain.html"><img src="img/menu_explain.gif" onmouseover="x=this.src;this.src='img/menu_explain_anime.gif'" onmouseout="this.src=x"></a> 3週間前までは、普通に作動していたので、そのままサイトを制作していました。 それから3週間手を付けないでいたのですが、今日久しぶりにサイトを開くとgifアニメの動作がおかしくなっていました。 マウスアウトをしても画像が戻らないんです。 firefoxとsafariで確認したのですが、両方ともダメでした。 IEでは未確認です。 始めにサイト制作をしていた期間は1週間程ですが、その間はずっと正常に動作していました。 それから今日まで一度もそのhtmlファイルも画像ファイルも開いていません。 何が原因でこうなったのでしょうか。 それとも元々のhtmlの記述ミスでしょうか。 大変困っております。 他に必要なhtml等あれば、補足しますので言ってください。 よろしくお願いします。

  • CSS
  • 回答数1
  • ありがとう数2

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

gifアニメではありませんね。  アニメーションGIFは、画像自体が動きますがそれをmousoverやmouseoutで制御はできません。  もし画像を置き換えるなら、GIFでない画像をmouseoverやmouseoutのイベントによってjavascriptを使って切り替えます。ですが、示されたHTMLには、別画像が書かれていません。 ★現在は、このようなjavascriptを使った方法はほとんど行われていません。セキュリティ対策でjavascriptを停止しているブラウザが存在することなどが原因です。もっと簡単なスタイルシートで画像を置き換える方法が一般的です。

rossi46mail
質問者

お礼

回答ありがとうございます。 記述を変えたら直りました。 <img src="img/menu_explain.gif" onmouseover="this.src='img/menu_explain_anime.gif'" onmouseout="this.src='img/menu_explain.gif'"> 戻す時の画像を指定してあげると戻りました。 回答していただきありがとうございました。 あと、アニメーションGIFですね^^ 訂正ありがとうございます。

関連するQ&A

  • 外部ファイルの記述の仕方

    HTMLにリンクを指定している画像にマウスが重なったときに画像を変化するようにHTML文法にJavaScriptを指定しているのですが、外部ファイル化したいのですがどのように記述すればよいでしょうか? <a href="1.html"> <img src="menu01.gif" onMouseOver="this.src=\'menu11.gif\'" onMouseOut="this.src=\'menu01.gif\'" height="30" width="138" > </a> <a href="2.html"> <img src="menu02.gif" onMouseOver="this.src=\'menu12.gif\'" onMouseOut="this.src=\'menu02.gif\'" height="30" width="138" > </a>

  • GIFアニメの動作の件で教えてください。

    フェイスブックやツィッター、アンドロイドスマホなどにGIFアニメをアップロードしたいのですが、他のサイトからGIFアニメが載っているサイトに切り替えただけで、GIFの静止画像ではなくGIFアニメを動作させるにはどうすればよいのでしょうか。 パソコンの場合、画面に表示されているGIFアニメの静止画像をクリックすれば動き出すのですが、クリックしなくとも初めから動くようにしたいので、どなたか教えてください。 よろしくお願いします。

  • マウスオーバー時に常にgifアニメ最初からスタート

    マウスオーバー時にgifアニメの画像を表示させているのですが、 ループし続けてる状態で、途中から始まってしまいます。 マウスオーバーするたびにで初めからアニメーションを表示するにはどうしたらよいでしょうか? よろしくお願いします。 $('hoge').hover(function(){ $(this).append("<img src='~/images/backmovie-1.gif' class='covermovie'>"); },function(){ $("img.covermovie").remove(); });

  • 1*1の透過gifを別画像に変更する方法

    アマゾンWEBサービスを使ってデータをアマゾンからとってくるプログラムを書いています。 アマゾンで商品画像が用意されていないやつは1*1の透過gifへのリンクが張られています。 この透過gifを自作の"NO IMAGE"のgif画像にjavascriptで変更したいのです。 下記のようなスクリプトがあったのでこれを利用しようとおもってるのですが、どうもclass="side"をいれると正常に動作しないのですがなぜでしょう? このCSS記述がなければ正常に動作するのですが、これはわけあってはずすことができません。 ---------------------------------------- <img src="商品画像のURL" onload="replaceImage(this)" class="side" /> ---------------------------------------- ---------------------------------------- function replaceImage(img) { if (img.width == '1' && img.src.match(/\.01\./)) { img.src = 'img/no_img.gif'; } else if (img.width == '1') { img.src = img.src.replace('.09.','.01.'); } } ---------------------------------------- どなたか、良い解決方をご教授いただけますようお願いいたします。

  • よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたい

    よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたいと考えております。そこで以下のような記述をしたいと考えているのですがうまく行かず、また原因もわからずに困っておます。どなた様かご指導のほどよろしくお願いいたします。 まず以下の記述をしました。 [html] <div id="menu"> <ul> <li id="menu1"><a href="a/index.html" title="HOME" ><img src="img/1.gif" alt="HOME" onmouseover="this.src='img/11.gif' onmouseout="this.src='img/1.gif'" /></a></li> <li id="menu2"><a href="b/index.html" title="ホームページ製作"><img src="img/3.gif" alt="HOME" onmouseover="this.src='img/33.gif' onmouseout="this.src='img/3.gif'" /></a></li> <li id="menu3"><a href="c/index.html" title="ネットショツプ製作"><img src="img/4.gif" alt="HOME" onmouseover="this.src='img/44.gif' onmouseout="this.src='img/4.gif'" /></a></li> <li id="menu4"><a href="d/index.html" title="SNSサイト製作"><img src="img/6.gif" alt="HOME" onmouseover="this.src='img/66.gif' onmouseout="this.src='img/6.gif'" /></a></li> <li id="menu5"><a href="e/index.html" title="SEOプロモーション"><img src="img/7.gif" alt="HOME" onmouseover="this.src='img/77.gif' onmouseout="this.src='img/7.gif'" /></a></li> <li id="menu6"><a href="f/index.html" title="出版・印刷・その他"><img src="img/8.gif" alt="HOME" onmouseover="this.src='img/88.gif' onmouseout="this.src='img/8.gif'" /></a></li> <li id="menu7"><a href="g/index.html" title="お問合せ・御注文"><img src="img/5.gif" alt="HOME" onmouseover="this.src='img/55.gif' onmouseout="this.src='img/5.gif'" /></a></li> </ul></div> [css] #menu ul{ list-style-type:none; } #menu ul li{ display:inline; } http://desktop10.web.fc2.com/test.html 上記URLにアップしています。よろしければ見てみてください。 画像も、横並びにならず、マウスを合わせたときの画像も変化しません。また、ブラウザ上の左下に ページでエラーが発生しました。と出てしまいます。 お手数では御座いますがどなた様かご教示をお願いできませんでしょうか? わたしとしては、以下のような感じにしたいと考えております。 http://desktop10.web.fc2.com/test1.html なお、一応記載させて頂きますが画像の中に「ホームページ製作」や「SNS」等と・・・ありますが、私は 現在cssの学習をしており、特別パソコン関係の商売をしているわけでもありません。ただ、今後の自分のために色々と出来ればよいと考えているところであります。 初心者では御座いますが、どなた様かご指導のほどよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • マウスオーバーで画像の切替でタイマーをつけるには?

    <html> <head> <script type="text/JavaScript"> <!-- imglist = ["img1.gif", "img2.gif"]; preImage = new Array(); for (i=0; i<imglist.length; i++) { preImage[i] = new Image(); preImage[i].src = imglist[i]; } //--> </script> </head> <body> <img src="img1.gif" onmouseover="this.src='img2.gif'" onmouseout="this.src='img1.gif'"> </body> </html> 例えば上記のようなソースでimg1の画像にマウスオーバーでimg2に画像が入れ替わるのですが、 マウスアウトした時に、すぐimg1の画像に戻るのではなく、img2の画像を1分くらい出して その後img1に入れ替わるようにしたいのですが、どうしたらよいでしょうか? 教えてください。よろしくお願いいたします。

  • gifアニメ

    こんにちは。 早速gifアニメに関する質問をさせてください。 2枚の画像を交互に表示させる分にはキレイに表示されますが、ウィンドウズメディアプレイヤーで見てるかのような、キレイに動いているgifアニメは、どうやって制作しているんでしょうか? どなたかご存知の方教えてください

  • NNでロールオーバーしたgifアニメの動きがおかしい

    ホームページを作成し、onmouseするとメニューのアイコンが gifからgifアニメに切り替わるようにしています。 IE6.0とNN7.1で動作確認しているのですが、 NNの方で、画像は切り替わるのですがgifアニメが うまく動きません。IEでは問題なく動作します。 gifアニメは文字の色が順番に変わるアニメーションなのですが、 onmouseするとアニメーションの最後の画像が表示されるだけでうまく動きません。 プログラムの組み方が悪いのか、gifアニメが悪いのか、 NNが悪いのかわからず困っています。 <head>と</head>の間↓ <script language="JavaScript"> <!-- if(document.images){ a1=new Image(); a1.src="image/b_top_m.gif"; a2=new Image(); a2.src="image/b_top.gif"; } else{ a1="" a2="" b1="" b2="" document.a="" } --> </script> <body>と<body>の間↓ <a href="top/top_frame.html" target="mid" onMouseover="document.a.src='image/b_top_m.gif'" onmouseout="document.a.src='image/b_top.gif'"> <img src="image/b_top.gif" border="0" alt="top page" name="a"></a> &nbsp;<a href="gal/gal_frame.html" target="mid" onMouseover="document.b.src='image/b_gallery_m.gif'" onmouseout="document.b.src='image/b_gallery.gif'"> <img src="image/b_gallery.gif" border="0" alt="works" name="b"></a> まだ初心者でJavaScriptについてはよくわかりません。 ちなみに、1つ「"」を抜いてエラーにするときちんと動いたりします(-_-;) よろしくお願い致します。

  • document.writeln内でマウスオーバー

    現在、HPを制作中なんですがページ数が増えサイドメニューを javascriptで一括管理するようになりました。(SEO的に不利なのを承知の上) しかし、ナビゲーションの画像を↓ <img src='/img/sonota-1.png' hspace='0' vspace='0' onmouseover='this.src='/img/sonota-2.png'' onmouseout='this.src='/img/sonota-1.png'' width='240' height='65' alt='その他'> のように記述していたのですがdocument.writelnで、これを表示させるとマウスオーバー時の 画像がマウスを重ねても表示されません。 要は、「document.writeln」内で「onmouseover='this.src='/img/sonota-2.png'」使うにはどうしたらいいのでしょうか。

  • スワップイメージとロールオーバーの組み合わせで…

    上の画像をクリックした時に下の画像が切り替わるページを 作ったのですが、上の画像をmouseoverで切り替えるのではなく、 マウスを動かしてもクリックしたら下の画像と連動して上の画像も 切り替えることってできますか?? javascriptは初心者で、まったくわからずです(>-<) <SCRIPT LANGUAGE="JavaScript"> function doPic(imgName) { stepOn = ("" + imgName); document.step.src = stepOn; } </script> (中略) <a href="javascript:doPic('step1.gif');"><img src="img1.gif" name="img" border="0" onmouseover='this.src="r_img1.gif"' onmouseout='this.src="img1.gif"'></a> <a href="javascript:doPic('step2.gif');"><img src="img2.gif" name="img" border="0" onmouseover='this.src="r_img2.gif"' onmouseout='this.src="img2.gif"' ></a><br> <img name="step" src="step1.gif"> ↑こんな感じで作っております<(_ _)>