- ベストアンサー
マウスオーバーで簡単なアニメーション？
http://www.mamanqa.com/ 上記のサイトのメニューのようにマウスオーバーでぴょこんと画像が上に飛び出すのはどうやってやっているのでしょうか。 gifアニメにしてみるとこのサイトのように滑らかな動きにならないし、ブラウザによって表示スピードが変わるのでgifアニメ以外でやりたいと考えています。 よろしくお願いします。 カテゴリ違いだったらすみません。
- rossi46mail
- お礼率96% (251/259)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
提示されたURLのソースコードを開くと「js/index.js」を読み込んでいます。 その中に画像操作のコードが書かれています。 jQueryというライブラリを利用して、アニメーション風に画像を動かしています。 参考URLに利用している機能の解説があります。
関連するQ&A
- マウスオーバーで伸びるサブメニューが正しく動作しません
こんばんは。 以下サイトのメインメニューの左三つのボタンのように、 ボタンをマウスオーバーするとボタンの上にサブメニューが上がり、 サブメニューにあるテキストがそれぞれボタンになっているという仕組みを作ろうとしています。 http://www.mizkan.co.jp/index_1.html ・マウスオーバー addEventListenerのMOUSE_OVERでボタンの上にカーソルが乗ると、 gotoAndPlayでサブメニューが上がるアニメーションのフレーム番号に飛ぶ。 ・マウスアウト addEventListenerのMOUSE_OUTでボタンからカーソルを外すと、 gotoAndPlayでサブメニューが下がるアニメーションのフレーム番号に飛ぶ。 上記のscriptを作るところまでは上手くいきました。 しかしマウスオーバー時に伸びているサブメニューにマウスカーソルを乗せると、 マウスオーバーとマウスアウトのアクションが繰り返し実行され、 サブメニューが上がったり下がったりのアニメーションを繰り返してしまいます。 この動きは、おそらく、サブメニュー部分の領域が一瞬ボタンではないと認識され、マウスアウトのアニメーションが動きだすが、やはりボタンとして認識されマウスオーバーのアニメーションが動き出す。という動きがループしてしまっているのではないかと思われますが、解決方法が見つかりませんでした。 上に記載した方法以外でも同じような動きになる作り方があればご教授ください。 宜しくお願い致します。
- 締切済み
- Flash
- イメージマップでのマウスオーバー
イメージマップでのマウスオーバーなのですが、 此方で見ても良く解らなかったので質問させて頂きます。 http://nearlyequal.fc2web.com/m.gifの画像を http://nearlyequal.fc2web.com/m1.gif の様にイメージマップでマウスオーバーを個々の菱形に設定したいのですが、どの様にすれば良いのでしょうか？ area shapeの中にonmouseoverで指定してみても上手くいきませんでした。。。 タグ初心者の為、詳しく教えていただければ幸いです。
- ベストアンサー
- JavaScript
- なぜ？マウスオーバーで1pt位置がずれる
こんにちは。 CSSでマウスオーバーの指定をしたのですが、WindowsのIE6だけがマウスオーバー時に1ptだけ上に上がってしまします。 （Mac.Winのfirefox,safariは問題ありませんでした。） マウスオーバーの指定は /* サイドナビ---------------- */ #contents #sidenavi li#title { background: url(images/btm_c_home.gif) no-repeat right; padding: 0px; } /* サイドナビ---------------- */ に対して /*サイドナビボタンロールオーバー*/ #contents #sidenavi li#chome a:hover{ background: url(images/btm_c_home_ov.gif) no-repeat right; } /*サイドナビボタンロールオーバー*/ というようにa:hoverで指定しています。 透過gifでメニューボタンを作っているので、バックにマウスオーバー時には通常のボタン画像が見えてしまってかっこわるいです。 オーバー時に動かないようにしたいのですがどうしたら良いでしょうか？
- ベストアンサー
- HTML
- Javascriptのマウスオーバーについて
Javascriptでマウスオーバーというものがあります。 画像の上にマウスを持っていくと、画像が切り替わるものです。参考：http://www14.plala.or.jp/sugachuu/JavaScript/k06.html そこで、質問なのですが、マウスオーバーのスクリプトを 同じページ内で いくつも表示させるのは可能ですか？？（上記参考ＵＲＬでたとえると、大きな画像１つと小さな画像４つを一まとめにして、一まとめしたものをいくつも同じページ内で表示することは可能ですか？？） もし可能なら、そのやり方を教えてください。サンプルソースみたいなのをつけていただくと、うれしいです。 よろしくお願いします。
- 締切済み
- JavaScript
- マウスオーバーについて
ひとつの画像を区切って、区切ったそれぞれの枠（セルでもいい）でマウスオーバーを発生させるのってどうやるんですか。 よくホームページとかで見る、上にあるメニューです。 それを、２枚の画像を使ってやりたいんですけど・・・ また、タグが乗っている 詳しく説明されているホームページ輪ありませんか。 極力スタイルシートは使いたくないです。 また、ついでですが、スタイルシートを使わないでtableの、横だけを消す方法（透明にするか、たてと横で別のいろを指定します）ってないですか。
- 締切済み
- ネットトラブル
- マウスオーバー（クリック）画像がでズーム
下記のサイトのように画像にマウスが乗ったら、ズームするようにしたいのですが、どのようなスクリプトを書いているのでしょうか？ http://www.bobscube.com/ もしくは下記のサイトのようにクリックすると画像がズームするサイト。スクリプト的には同じ（マウスクリックとマウスオーバーの違い）じゃないかと思うのですが・・・。 http://www.opfa.org/ 単純に画像がズームするだけなら、こちらのサイトに載っていた↓で出来るのですが、上記サイトのように滑らかにズームする方法が分かりません。 onClipEvent (load) { this._yscale = 100; this._xscale = 100; } on (rollOver) { this._yscale = 200; this._xscale = 200; } on (rollOut) { this._yscale = 100; this._xscale = 100; } ご教授宜しくお願い致します。
- ベストアンサー
- Flash
- マウスオーバーの合体
マウスオーバーのプルダウンメニューと マウスオーバー画像変更スクリプトを組み合わせることは可能なのでしょうか？ イメージとしては所期画面に画像Ａがあり、マウスを載せると画像Ａが画像Ｂになり、 更に画像Ｂの下にプルダウンメニューが表示されるイメージです。 尚、現在は以下の組み合わせがうまくいかない為（不可能？） 個々にスクリプトを記載しておきます。 ↓↓↓↓↓↓マウスオーバーのプルダウンメニュー↓↓↓↓↓↓ <html> <head> <script language="JavaScript"><!-- vType = ["hidden","visible"]; function pdMenu(mName) { Menu = document.all[mName].style; Menu.visibility = vType[Menu.visibility.indexOf("hidden") + 1]; } // --></script> </head> <body> <img src="main.png" onMouseover="pdMenu('Menu')"><br> <div id="Menu" style="visibility:hidden" onMouseout="pdMenu('Menu')"> <a href="http://www.yahoo.co.jp/" ><img src="sub01.png" border="0"></a><br> <a href="http://www.google.co.jp/"><img src="sub02.png" border="0"></a><br> </div> </body> </html> ↑↑↑↑↑↑マウスオーバーのプルダウンメニュー↑↑↑↑↑↑ ↓↓↓↓↓↓マウスオーバー画像変更スクリプト↓↓↓↓↓↓ <img border="0" src="main.png" onmouseover="this.src='main2.png'" onmouseout="this.src='main.png'"> ↑↑↑↑↑↑マウスオーバー画像変更スクリプト↑↑↑↑↑↑
- 締切済み
- JavaScript
- CSSで背景画像マウスオーバー
スタイルシートのマウスオーバーについて質問です。 <div class="AAA"> <div style="margin-top: 22px;"><img src="http://xxxxx.gif"></div> </div> （css）ーーーーーーーーーーーーーーーーーーーーーーーー .AAA { background-image: url("http://xxxxx_back.gif") } 上記の状態で、「xxxxx.gif」の背景に「xxxxx_back.gif」を表示させるまでは 思い通りに出来たんですが、 背景表示はマウスオーバーの時だけにしたかったので、 <div class="BBB"> <div style="margin-top: 22px;"><img src="http://xxxxx.gif"></div> </div> （css）ーーーーーーーーーーーーーーーーーーーーーーーー .BBB a:hover { background-image: url("http://xxxxx_back.gif") } という風にしたんですが、 BBBにすると、オーバー時の表示は出来ましたが、背景画像がズレてしまいます。 AAAの時の表示位置は正確です。 AAAとBBBの違いは常時表示か、マウスオーバー表示かの違いしかないと思うのですが、 何故でしょうか。 ※safariで検証しました。 ※style="margin-top: 22px;"は都合上入れてます。
- ベストアンサー
- ブログ
- グローバルナビゲーション(カレントページ・マウスオーバー)の作り方を教
グローバルナビゲーション(カレントページ・マウスオーバー)の作り方を教えてください。 個別ページ毎にactなどとクラスをいちいち割り振るのではなく、JavaScriptで、パッと一気に処理したいと考えています。 ネットを探し回って、「カレントページ」「マウスオーバー」それぞれに対応する記述は見つけたのですが、それらを組み合わせると期待通りの動作となりません。具体的には、カレントページで、グローバルメニューをマウスオーバーした際、マウスオーバー画像へ変わるまではよいのですが、マウスアウトした時点で、カレントではない、ノーマル画像へと変更されてしまいます。(リロードすると、カレントメニュー画像へと戻るのですが…) 「カレントページにいるときは、マウスオーバー画像を表示させずにカレントメニュー画像のままにしとく」 あるいは、 「カレントページでマウスアウトした際はカレントメニュー画像を、その他のページでマウスアウトした際はノーマルメニュー表示させる」ようにするためには、どうしたらよいでしょうか？ スクリプトそのものを教えていただけると一番有難いのですが、難しいようであれば、参考になるサイト等でも構いません。何らしかのヒントだけでも、誰かくださいー。
- ベストアンサー
- JavaScript
- マウスオーバーで画像を拡大表示させたいです
http://www.videocopilot.net/tutorials/ 上記サイトのように、マウスオーバー画像をマウスオーバーするだけで マウスカーソルに追尾して画像やflvを表示させるには、どのようなプログラムを行えばよいのでしょうか？ または、ソフトの購入などが必要なのでしょうか？ ヒントまたは参考サイトなどございましたら、教えてください。 お願い致します。
- 締切済み
- JavaScript
お礼
回答ありがとうございます。 上記URL見させていただきました。 全く意味が分かりませんでした。 諦めるしかないみたいですね。 ありがとございました。