- 締切済み
マウスオーバーで他領域の画像を切り替える方法
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- yurayura-pine
- ベストアンサー率54% (12/22)
こちらのサイトさんは参考にならないでしょうか。 →http://blog.g-fellows.com/index.php?e=11
関連するQ&A
- マウスオーバー：一つの画像だけを変えるには？
javascript初心者です。マウスオーバーの記述について教えてください。 ３つのリンクボタンがあるのですが、このうち、一つだけ画像が変わるようにしたいと思っています。 ※リンク先は、３つもと同じです。 例：A・B・Cのリンク画像 A～CのどれをオンマウスしてもAの画像だけが変わるようにしたい。 また、マウスアウトした時には、元の画像に戻るようにしたいです。 以上、よろしくお願い致します。
- ベストアンサー
- JavaScript
- マウスオーバーでフェードインする画像
背景画像の上にabsolute等で自由に配置でき、通常時は透明で非表示。マウスオーバーすることでフェードインして表示されるという画像を実装したいと考えています。 jsやqueryを使って、IE6に対応した作り方を探しています。 シンプルなものでどのような方法がありますでしょうか？
- ベストアンサー
- HTML
- ブラウザのウインドウ下部に画像を固定する方法
Webプログラミングに関する質問です。 ブラウザのウインドウ下部に画像を固定する方法があれば教えて下さい。 例になるサイトが無くて申し訳ないのですが、 まず、webブラウザのウインドウ一面にスクロールなしで画像Aを配置し、 その画像に重なるように、もう一枚の画像B(バナーのような横長のもの)を ウインドウの底に固定させて配置する方法がわかりません。 「ウインドウのサイズを変更させることで、画像Aが画像Bの下に隠れる」 というページを作りたいのですが、 知恵不足でつまずきました。 説明が下手で申し訳ありませんが、 分かる方がいらっしゃいましたら、よろしくお願いします。
- ベストアンサー
- CSS
- 離れた場所にマウスオーバーで画像を変えたい。
宜しくお願いします。 色々と調べて試してみるのですが解決できず、こちらでご相談させ頂こうと思います・・・。 サイト内にあるボタン自体をマウスオーバーで変化させ、かつそのボタンを選択している時には、別の離れた場所にも指定した画像を表示させたいと考えております。 1つやっかいなのが、今回.3つ画像があるのですが、3つとも微妙に異なる場所へ表示させなければなりません。一応、簡単な資料を作成しましたので添付のデータをご確認頂きたいのですが・・・。 配置はそれぞれ記載されている感じで、#A、#B、#Cというコンテナ内に入っているボタン画像にマウスが行くと、ボタン自体もマウスオーバーで変化し、かつ、#container内の赤い画像の場所にも別のsampleA.pngを表示させたいと考えています。 BとCに関しても同様で、それぞれ個別の位置に画像を表示させたいと思います。 ボタン側のマウスオーバーは出来たのですが、更に加えて離れた場所に画像を表示させる方法が分かりません。 <div id="container">ここに画像を表示させたいです！</div> <div id="A"><a href="***"><img src="images/1.png" onmouseover="this.src='images/over1.png'" onmouseout="this.src='images/1.png'"></a></div> <div id="B"><a href="***"><img src="images/2.png" onmouseover="this.src='images/over2.png'" onmouseout="this.src='images/2.png'"></a></div> <div id="C"><a href="***"><img src="images/3.png" onmouseover="this.src='images/over3.png'" onmouseout="this.src='images/3.png'"></a></div> どなたか、こういった方法でサイトを作成させた方いらっしゃいましたらアドバイスいただけますと助かります。 どうぞ、宜しくお願いいたします。m(_ _)m
- ベストアンサー
- CSS
- Jqueryでのマウスオーバー時の効果について
ホームページ作成に関してhttp://alyne.jp/#tab01のサイトにあるようなメニューをマウスオーバーするとメイン画像がフェードインするような効果を出すにはJqueryでどのようにすればいい のかわかりません…お教えいただけたらありがたいです。 dream weaverで作成したいのでわかりやすいコードがありましたらよろしくお願いいたします。
- 締切済み
- JavaScript
- マウスオーバーで大きい画像が切り替わる設定について
同一ページで複数のサムネイルにマウスオーバーしたら 大きな画像が切り替わる設定をしたいのですが・・・ 下記サイト（同一ページで複数のスワップイメージ（ギャラリー）を見せたい）の 『フェードとかない普通のバージョン』を参考にしております。 下記サイトのスクリプトでは、サムネイルをクリックして画像の切り替えを 実行するのですが、サムネイルにマウスを置くだけ（クリックなし）に変更する ことは可能でしょうか？ 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
- マウスオーバすると画像の配置が変わる
今回コチラ（http://www.skuare.net/test/jrumble.html）のjqueryを入れました。 サイト：http://snapkidz.biz/wp/ ブルブルする場所はコップの部分になります。 記載部分は以下です。 ーheader.phpー <a href="#" class="cup">cup</a> ーCSSー a.cup { display: block; width: 90px; /* 画像1枚分の横幅 */ height: 110px; /* 画像1枚分の高さ */ text-indent: -9999px; /* 文字を見えなくする */ background-image: url("http://snapkidz.biz/wp/wp-content/uploads/2011/12/cup.png"); /* 画像ファイル名 */ position:relative; top:303px; left:1080px; } a.cup:hover { background-position: top right; /* 背景画像の表示開始基準を右上に変更 */ } マウスオーバすると画像の配置が移動してしまいます。 これはどうすればなおるのでしょうか？ 宜しくお願いします。
- ベストアンサー
- CSS
- 異なる位置にある画像をマウスオーバーで差し替える
お世話になります。 ウェブページを制作するにあたり、添付のようなメニューを依頼されました。 ボタンAL1～AL3のマウスオーバーで、バナーAがバナーALに変化、 ボタンAC1～AC3マウスオーバーで、バナーAがバナーACに変化、 ボタンAR1～AR3マウスオーバーで、バナーAがバナーARに変化、 それぞれのボタンからマウスが外れると、バナーAにもどる。 バナーB以下、必要に応じた数だけ同様の動作になります。 フラッシュで作れば簡単なんですけど、担当者レベルでフラッシュが扱えず メンテナンスができないのでこんな方法になりました。 javascriptかCSSの制御で以下の手法が取れないでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- [JS or CSS]マウスオーバーで画像切り替え
初めまして。 ホームページを作成中なのですが、 メインビジュアル部分の画像表示で悩んでおります。 求めている動作としては以下の通りです。 ・グローバルナビにマウスオーバーすると、 すぐ下のボックス（どこでも）に画像が表示される。 ・マウスが離れると画像が消える。 ・画像の表示（切り替え）はフェードで行う。 簡単なソースを書くとこんな感じです。 <ul class="global_navi">/* グローバルナビ */ <li><a href="a.html"><img src="hoge01.png" /></a></li> <li><a href="b.html"><img src="hoge02.png" /></a></li> <li><a href="c.html"><img src="hoge03.png" /></a></li> </ul> <div class="main_graphic"> /* ここに画像がフェードイン＆フェードアウトする */ </div> 近い動作をするjsを見つけたのですが、下記2点のjsを足して2で割った様なイメージです。 ■画像のマウスオーバーで、離れた位置に拡大画像を表示する http://css-eblog.com/csstechnique/css-remote-rollover.html ■メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン「ImageNavigation」 http://blog.net-king.com/2010/10/06/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%99%E3%82%8B%E3%81%A8%E3%83%A1%E3%82%A4%E3%83%B3%E7%94%BB%E5%83%8F%E3%81%8C%E5%88%87/ 動作イメージでは前者ですが、フェードができません。 ビジュアルイメージでは後者ですが、マウスを離しても画像が消えません。 近い動作をするjs、もしくはcssテクニックをご存知であればご教授頂けないでしょうか。 お手数ですが、よろしくお願い申し上げます。
- ベストアンサー
- CSS
- マウスオーバーで外部ファイルを表示したい
初心者です。宜しくお願いします…。 「ステージ上にボタンを５つ配置し、ボタンにマウスを重ねると、一定の場所にそれぞれのボタンに対した画像が表示され、マウスが離れると非表示」というムービーを作りたくて、試行錯誤していました。 表示させたいMCをsetumei_mcとした場合 最初は、同じファイル内で処理を行おうと思い、ステージ上にsetumei_mcを（名前を変えて５個）配置し、ボタンの方に、「setumei_mcをあらかじめアルファを0にしておき、マウスが乗ると100、離れると0」という方法でやってみました。 （そして、表示された時に半透明の状態にしたかったのでsetumei_mcのを入れ子にし、中でmcのアルファをあらかじめ80％ぐらいに落としています。） 動作は成功したのですが、タスクマネージャーで表示状態を見ていると、他のフラッシュとくらべると明らかにマシンに負担がかかっていて、自分以外のPC環境での動作がかなり不安です。 半透明のまま表示はしたいので、この方法でステージ上に配置してるのがいけないのか…？外部ファイルで半透明にしたPNGorフラッシュで読み込まないといけなかったのか… また、外部ファイルを、マウスオーバーで半透明で表示させ、マウスが離れたら非表示。＊フェードイン、アウトが負担がかかるようでしたらあきらめます…（ｉ_ｉ）…を具体的にどういう風にしたらいいのか…どなたか教えて頂けませんか？ 初めての質問なので、文章など、要領を得てなかったらすみません。 ご回答、宜しくお願いします。
- ベストアンサー
- Flash
