- ベストアンサー
サムネイル画像のマウスオーバーアニメーション
BlurFiltanの回答
- BlurFiltan
- ベストアンサー率91% (1611/1754)
ご察しの通りマスクだと思います。 しかし何がわからないのかわかりません。 この 何がわからないのかがわからない の意味は， 「簡単じゃん」 という意味ではなくて，文字通り 何が（何をどうする部分が）わからないのかがわからないと言う意味です。 やりかたによっては難しいでしょうし，やりかたによっては簡単ですから何とも言えません。 つまり 「全部スクリプトでする（画像の配置から矩形の描画など全て）」場合をきいているのか， 「マスクをする」だけに関してきいているのかがわかりません。 「処理」 とかそういうことではなくて， 何をどうするという 「イメージ」 を固めれば良いのではないでしょうか。 やることは， 「２つのMC（ムービークリップ）を拡大縮小させる」 それだけと言えばそれだけです。 ロールオーバー前 ↓ ■■■ ←MC □□□□□ ←MC ロールオーバー後 ↓ ■■■■■ ←MC □□□□□□□ ←MC ロールアウト後 ↓ ■■■ ←MC □□□□□ ←MC この MC を手で書いても良いですしスクリプトで書いても良いです。 スクリプトで書きたいのでしたら 矩形の描画方法と矩形入りムービークリップの配置方法を調べるか聞くかすべきでしょうね。 また， 上記のようにMCを拡大縮小させる部分も 手でそういう拡大縮小アニメーションを作っても良いですしスクリプトで書いても良いです。 スクリプトで書きたいのでしたら 拡大縮小方法方法を調べるか聞くかすべきでしょうね。 次に上側の■MCを画像にかけるマスクにするわけです。 ロールオーバー前 ↓ ■■■ ←マスクMC 回回回回回 ←画像（MC） □□□□□ ←MC ロールオーバー後 ↓ ■■■■■ ←マスクMC 回回回回回 ←画像（MC） □□□□□□□ ←MC ロールアウト後 ↓ ■■■ ←マスクMC 回回回回回 ←画像（MC） □□□□□ ←MC 画像または画像MCは手でレイヤーに配置しても良いわけですし，スクリプトで配置しても良いわけです。 スクリプトで配置したいのでしたら， その方法を調べるか聞くかすべきでしょうね。 または 手で配置したムービークリップ内に外部画像をスクリプトでロードするという場合も考えられます。 もしその場合であればスクリプトで外部画像をロードする方法を調べるか聞くべきでしょうね。 また， マスクはレイヤーのマスク（マスクレイヤーに配置）しても良いわけですし， スクリプトで配置した後，スクリプトでマスクをかけても良いと思います。 スクリプトでマスクをかけたいのでしたら， その方法を調べるか聞くかすべきでしょうね。 スクリプトでするにしてもしないにしても， どちらにしても全く同じ上記で図示した内容のことをイメージする必要があります。 そのイメージ通りに動くように仕組みを作れば良いのです。 それをスクリプトでしても良いでしょうしアニメーションを作っても良い。 少なくとも， どんな方法であれ矩形を拡大縮小させることもできなかったら， 全く何にも動かせないのと同じということになると思います。 ですから「何がわからないのかがわからない」のです。 もしご自身でもわからない状態でしたら， 方法は何でも良いので２つのMCを拡大縮小させるところからやってみれば良いと思います。 ２つができなければ１つからです。
関連するQ&A
- サムネイルをマウスオーバーすると画像を表示
はじめまして。 サムネイル画像をマウスオーバーすると、特定の場所に画像が表示される方法を教えて頂きたいです。 以下がイメージに近いです。が、サムネイル画像は自分で別に用意したいです。 http://mizuame.sakura.ne.jp/jquery.tgImageChange/demo/index2.html これを実現させる為には、どのjqueryを利用すれば良いのでしょうか？ 色々とググってみたのですが、ぴったりと希望のものが見つからなく…。 あまり知識も無いので、丁寧に説明されているものですと助かります…(すみません。) わかりやすい説明画像も添付しました。 ぜひ教えて頂きたいです。緊急で困っています。よろしくお願い致します！
- 締切済み
- CSS
- サムネイル画像をマウスオーバーすると写真が切り替わる方法
htmlでホームページを作っているのですが、大きな写真の横に小さなサムネイル画像（前面、背面など角度の違う写真）を載せて、サムネイルをマウスオーバーすると同一のページで大きな写真が切り替わる仕組みを作りたいのですが、やり方がわかりません。 比較的簡単な方法での作り方を教えてください。宜しくお願いします。
- ベストアンサー
- JavaScript
- Flash マウスオーバー時などのアニメーションについて質問があります
Flash マウスオーバー時などのアニメーションについて質問があります。 こんにちは。Flash初心者です。 使用しているソフトは「Adobe Flash CS4 Proffesional」です。 現在、ボタンを製作しております。 その過程でマウスオーバー時、マウスダウン時等に アニメーションを加えようと思っております。 実際にアニメーションは作成できたのですが、 アニメーションが無限にループしてしまいます。 一度きりのアニメーションにしたいのですが、うまくいきません。 どのような処理を行えばよいか教えていただけますでしょうか？ よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- マウスオーバーで他の2個の画像を入れ替えるには？
javascript初心者です。何度試してみてもできないので、どなたか教えて下さい。 3つの画像が横に並んでいます。1番目の画像をマウスオーバーすると、2番目、3番目の画像が変わります。2番目の画像をマウスオーバーすると、1番目、3番目のい画像が変わります。3番目の画像をマウスオーオーバーすると、１番目、２番目の画像が変わります。こういった処理がしたいのですが、うまくできません。どなたかよろしくお願いします。 （イメージ的にはこんな感じです。これはflash ですが・・・⇒http://www.yamazakipan.co.jp/）
- ベストアンサー
- JavaScript
- jQuery：マウスオーバーで画像が切り替わる
下記のサイトのような事が実装できるjQueryプラグインを探しています。 http://www.sumitomo-rd-mansion.jp/shuto/shinjuku/private.html 実装したい事 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ １）メイン画像の切り替えは 矢印をクリックするか サムネイルをマウスオーバーすると切り替わるようにしたい。 （スライドショーはなし） ２）メイン画像にはテキスト（説明文）も入れられる ３）メイン画像の下には、サムネイル画像も表示できる ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 参考になるサイト等、ご存知でしたら教えていただけば幸いです。
- 締切済み
- CSS
- マウスオーバーして画像を入れ替えたい
YahooのジオシティーズでHPを作成していますが、教えていただきたいことが２つあります。 １.javaスクリプトを使ってマウスオーバー、マウスアウトした時に写真を入替えたいと思っていますが、全くの初心者でどこにタグを入れていいのかわかりません。 どなたか下記ＵＲＬのページの写真(1)にマウスオーバーした場合に写真(2)に変わり、マウスアウトすると写真(1)に戻るよう、下記URLのソースをすぐに使えるように手直ししていただけませんか？http://sky.geocities.jp/hokuto5131/test.html ２．Yahooのジオシティーズでマウスオーバーして画像を入替えるHPを見てみると、入替える画像のURLはimg.1のようになっていますが、私がYahooのジオシティーズに画像データを送ると上記のURLのソースのように『http://sky.geocities.jp/hokuto5131/～』になってしまいます。なぜでしょうか？またそのページに貼り付けていない画像データをどうやってYahooのジオシティーズのサーバーに送るのでしょうか？ 以上よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- マウスオーバーで大きい画像が切り替わる設定について
同一ページで複数のサムネイルにマウスオーバーしたら 大きな画像が切り替わる設定をしたいのですが・・・ 下記サイト（同一ページで複数のスワップイメージ（ギャラリー）を見せたい）の 『フェードとかない普通のバージョン』を参考にしております。 下記サイトのスクリプトでは、サムネイルをクリックして画像の切り替えを 実行するのですが、サムネイルにマウスを置くだけ（クリックなし）に変更する ことは可能でしょうか？ JQuery $(function () { $('div.swap li a').click(function (e) { e.preventDefault(); var imagePath = $(this).attr('href'); var mainImage = $(this).parents('div.swap').find('p img'); $(mainImage).attr('src', imagePath); }); }); 参考サイト http://depthcode.com/2010/10/swap.html クリックなしに変更可能であればご教授いただけないでしょうか。 よろしくお願いします。
- 締切済み
- JavaScript
- マウスオーバーで横に反転するjqueryについて
マウスオーバーで横に画像が反転するjqueryのプラグインを探しています。 http://lab.smashup.it/flip/ このサイトのように画像Aから画像Bに反転するのですが、下のサムネイルをクリックするのではなく、画像自体にマウスオーバーすることでその画像が反転するものを探しています。 ※左から右にスライドするものは省きます。 もし同様のものがあるのであれば、jqueryに限らず情報をお待ちしています。 お力添えよろしくお願いします。
- ベストアンサー
- JavaScript
- ActionScript スクロールメニュー
ActionScriptで以下のサイトのように、下段のサムネールが左右にスクロールするメニューを作成したいのですが、実現方法がわかりません。 http://www.wasedazemi.com/ ・下段の最右、または最左の矢印ボタンを押すとその方向にメニュー1個分スクロールし、下段の真ん中のメニューの画像が上段に表示される。 ・下段の任意のサムネールを押すとその画像が下段真ん中に移動し、上段にその画像が表示される。 ・下段のサムネールはループしていて、スクロールをし続けても端にならずに回り続ける。 ・上段の画像にマウスオーバーすると青い枠線が表示される。 ActionScript 3.0、Flash CS5を利用しています。 ご教授よろしくお願いいたします。
- ベストアンサー
- Flash
- サムネイルをマウスオーバー時に手のアイコンに変わってほしいのですが。。
サムネイルをマウスオーバー時に手のアイコンに変わってほしいのですが。。 javascriptでサムネイルをクリックすると同一ページの離れた場所に拡大表示するという指示をしています。問題なく正常に動いていますが、サムネイルをマウスオーバーした際に手のアイコンに変わってほしいのですが、矢印のアイコンのままです。 javascriptの関係上、不可能なのでしょうか？？ ソースは以下です。 -------------------------------------------------------------------------------- ■拡大表示させる窓 #zoombox ------------------------------------------------------------------------------- ■サムネイル画像 <img src="img/01_s.jpg" width="118" height="80" alt="s01" onClick="showImage(this);"/> -------------------------------------------------------------------------------- ■javascript function showImage(el) { var imageSrc = el.src.replace(/_s\.jpg$/, ".jpg"); document.getElementById("zoombox").innerHTML = '<img src="' + imageSrc + '">'; }
- ベストアンサー
- JavaScript
お礼
ご回答ありがとう御座います。 (間違えて補足の方にお礼文を書いておりました) 全てスクリプトで書きたいと考えております。 画像の読み込み方法、短形の描画方法はわかりましたが、サイト例のように、 画像にマスクをかけて、マウスオーバーした際に見える部分をマスクする方法と、 マウスオーバーした際に拡大する方法がわかりませんでした。 こちらの方法を教えていただけると幸いです。
補足
ご回答ありがとう御座います。 全てスクリプトで書きたいと考えております。 画像の読み込み方法、短形の描画方法はわかりましたが、サイト例のように、 画像にマスクをかけて、マウスオーバーした際に見える部分をマスクする方法と、 マウスオーバーした際に拡大する方法がわかりませんでした。 こちらの方法を教えていただけると幸いです。